New
New
New
Guide
- Scroll
- How-to
Guide
- Scroll
- How-to
Guide
- Scroll
- How-to
How to Add Horizontal Scrolling to Framer Sites
I get a ton of questions regarding horizontal scrolling in Framer. In this blog I’ll be showing you the two main types of horizontal scrolling that you can achieve without using any code.
Posted by
Nandi
Table of contents
Horizontal scrolling with scroll transform
Alright, the first type is all about 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.
How to set it up:
Drop a frame onto your canvas and add all your horizontal content.
Set your frame to sticky. (Just make sure to readjust your height to 100 VH here)
Set a parent frame for 3000 pixels - your sticky frame remains visible until the end of your parent section (make sure all parent frames of the sticky frame are set to “overflow visible”).
Now we can apply scroll transform.
Add a scroll section to the long 3000px height parent frame. This will be our trigger. (name it something like #scroll).
Then just click on the images and look at the right panel >effects>scroll transform.
Set the “section in view” as the trigger. And for section select #scroll.
For the “from” setting we aren’t changing much, just set opacity and scale both to 1.
For our “to” setting you want to add an x offset (the left adjustment), adjust it until it reaches the end of your horizontal content.
Horizontal scrolling with scroll transform
Alright, the first type is all about 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.
How to set it up:
Drop a frame onto your canvas and add all your horizontal content.
Set your frame to sticky. (Just make sure to readjust your height to 100 VH here)
Set a parent frame for 3000 pixels - your sticky frame remains visible until the end of your parent section (make sure all parent frames of the sticky frame are set to “overflow visible”).
Now we can apply scroll transform.
Add a scroll section to the long 3000px height parent frame. This will be our trigger. (name it something like #scroll).
Then just click on the images and look at the right panel >effects>scroll transform.
Set the “section in view” as the trigger. And for section select #scroll.
For the “from” setting we aren’t changing much, just set opacity and scale both to 1.
For our “to” setting you want to add an x offset (the left adjustment), adjust it until it reaches the end of your horizontal content.
Horizontal scrolling with scroll transform
Alright, the first type is all about 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.
How to set it up:
Drop a frame onto your canvas and add all your horizontal content.
Set your frame to sticky. (Just make sure to readjust your height to 100 VH here)
Set a parent frame for 3000 pixels - your sticky frame remains visible until the end of your parent section (make sure all parent frames of the sticky frame are set to “overflow visible”).
Now we can apply scroll transform.
Add a scroll section to the long 3000px height parent frame. This will be our trigger. (name it something like #scroll).
Then just click on the images and look at the right panel >effects>scroll transform.
Set the “section in view” as the trigger. And for section select #scroll.
For the “from” setting we aren’t changing much, just set opacity and scale both to 1.
For our “to” setting you want to add an x offset (the left adjustment), adjust it until it reaches the end of your horizontal content.
Settings of horizontal scroll with scroll transform.
Settings of horizontal scroll with scroll transform.
Settings of horizontal scroll with scroll transform.
You got it down mate! Let’s have a look at our second type. ;)
Horizontal scrolling with overflow-x
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 touchpad.
This is achieved by applying an overflow-x style set to "scroll,” meaning the content within the frame that overflows on the x-axis will be scrollable.
How to set it up:
Create a frame and fill it with your horizontal content.
On your right hand panel go to “styles”
Set the overflow-x to "scroll". This way the overflowing content will be scrollable.
To make sure it works it’s important the images frame’s width isn’t set to fit content.
You got it down mate! Let’s have a look at our second type. ;)
Horizontal scrolling with overflow-x
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 touchpad.
This is achieved by applying an overflow-x style set to "scroll,” meaning the content within the frame that overflows on the x-axis will be scrollable.
How to set it up:
Create a frame and fill it with your horizontal content.
On your right hand panel go to “styles”
Set the overflow-x to "scroll". This way the overflowing content will be scrollable.
To make sure it works it’s important the images frame’s width isn’t set to fit content.
You got it down mate! Let’s have a look at our second type. ;)
Horizontal scrolling with overflow-x
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 touchpad.
This is achieved by applying an overflow-x style set to "scroll,” meaning the content within the frame that overflows on the x-axis will be scrollable.
How to set it up:
Create a frame and fill it with your horizontal content.
On your right hand panel go to “styles”
Set the overflow-x to "scroll". This way the overflowing content will be scrollable.
To make sure it works it’s important the images frame’s width isn’t set to fit content.
Settings of horizontal scroll with overflow-x.
Settings of horizontal scroll with overflow-x.
Settings of horizontal scroll with overflow-x.
Wrapping up
Adding horizontal scrolling to your Framer site is a breeze. Check out this resource where I show the two main types of horizontal scrolling in more detail.
Feel free to remix the project and explore how these effects work.
Can’t wait to see what you create!
Wrapping up
Adding horizontal scrolling to your Framer site is a breeze. Check out this resource where I show the two main types of horizontal scrolling in more detail.
Feel free to remix the project and explore how these effects work.
Can’t wait to see what you create!
Wrapping up
Adding horizontal scrolling to your Framer site is a breeze. Check out this resource where I show the two main types of horizontal scrolling in more detail.
Feel free to remix the project and explore how these effects work.
Can’t wait to see what you create!
