2 Types of Horizontal Scrolling Effect in Framer

2 Types of Horizontal Scrolling Effect in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Effect

2 Types of Horizontal Scrolling Effect in Framer

This demo website shows the two main types of horizontal scrolling in Framer. Both can be achieved without writing any code. Feel free to remix the project and explore how these effects work.

image of Nandi Muzsik

Created by

2 Types of Horizontal Scrolling in Framer
2 Types of Horizontal Scrolling in Framer
2 Types of Horizontal Scrolling in Framer

Related Lesson

Related Lesson

Related Lesson

About The Resource

So here's what you need to know about each type:

First Type

This type of horizontal scrolling uses sticky positioning combined with scroll transform triggered by a scroll section. We keep the content we want to scroll horizontally in a sticky frame and apply scroll transform to offset it to the left as we scroll down the website.

About The Resource

So here's what you need to know about each type:

First Type

This type of horizontal scrolling uses sticky positioning combined with scroll transform triggered by a scroll section. We keep the content we want to scroll horizontally in a sticky frame and apply scroll transform to offset it to the left as we scroll down the website.

About The Resource

So here's what you need to know about each type:

First Type

This type of horizontal scrolling uses sticky positioning combined with scroll transform triggered by a scroll section. We keep the content we want to scroll horizontally in a sticky frame and apply scroll transform to offset it to the left as we scroll down the website.

framer horizontall scroll with scroll transform

Framer horizontall scroll with scroll transform.

framer horizontall scroll with scroll transform

Framer horizontall scroll with scroll transform.

framer horizontall scroll with scroll transform

Framer horizontall scroll with scroll transform.

Second Type

This type works a bit differently because the content will not scroll horizontally as we scroll down the website. Instead, we allow the ability to hover over the content and scroll horizontally using our little touchpad. This is achieved by simply applying an overflow-x style set to "scroll," meaning the content within the frame that overflows on the x-axis will be scrollable.

Second Type

This type works a bit differently because the content will not scroll horizontally as we scroll down the website. Instead, we allow the ability to hover over the content and scroll horizontally using our little touchpad. This is achieved by simply applying an overflow-x style set to "scroll," meaning the content within the frame that overflows on the x-axis will be scrollable.

Second Type

This type works a bit differently because the content will not scroll horizontally as we scroll down the website. Instead, we allow the ability to hover over the content and scroll horizontally using our little touchpad. This is achieved by simply applying an overflow-x style set to "scroll," meaning the content within the frame that overflows on the x-axis will be scrollable.

framer horizontall scroll with overflow x

Framer horizontall scroll with overflow-x.

framer horizontall scroll with overflow x

Framer horizontall scroll with overflow-x.

framer horizontall scroll with overflow x

Framer horizontall scroll with overflow-x.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Interactive Isometric 3D Hero

    Interactive Isometric 3D Hero

    Effect

    Interactive Isometric 3D Hero

    Interactive Isometric 3D Hero

    Effect

    Interactive Isometric 3D Hero

    Interactive Isometric 3D Hero

    Effect

  • Show Once Code Override for Framer

    Show Once Code Override for Framer

    Effect

    Show Once Code Override for Framer

    Show Once Code Override for Framer

    Effect

    Show Once Code Override for Framer

    Show Once Code Override for Framer

    Effect