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.
Created by
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.
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.
