Horizontal scrolling fully engages visitors by using a unique interaction that changes their scrolling experience from vertical to right to left.
But, here’s the secret — it’s not horizontal scrolling. It’s vertical scrolling with an interaction that moves elements in our viewport as we scroll.
In this lesson you’ll learn how to create a horizontal scroll interaction doing the following:
Let’s create the primary structure of the horizontal scroll section — a Section element that holds all the elements inside it:
In our example, we’re going to horizontally scroll through 4 things. The number of items is important because it determines the height of the "Track" Section.
Let’s set a height on our Section:
Note: we’re using VW (viewport width) because we’re scrolling horizontally across 4 items. Each item equals 100vw in height (e.g., 4 items equals 400vw).
Now let’s add an element that we’ll use to view our items as they scroll by:
Pro tip: We can also use shortcut keys Command + Enter (on Mac) or Control + Enter (on Windows) to quickly access the Selector field of an element that is selected.
The “Camera” Div block serves as something through which we’re going to see items scrolling by. With the “Camera” Div block selected, let’s set it to be exactly the same dimensions as our viewport, and make it stick to its parent element:
When we set an element to position sticky, we’re automatically defining the parent element as the container its child element will stick to.
Let’s create our “Frame” Div block to horizontally align our items:
We’ll use the “Frame” Div block to move items in our scrolling interaction. Let’s style the Frame Div block:
First, we’ll create an element that will hold our image:
You can also add padding on all sides to give the items breathing room (e.g., 40 pixels of padding on all sides). To do this, open the Style panel > Spacing and set the padding.
Now, we can place an image inside of the “Item” Div block we just created.
For this example, we're using images that take up the full width and height of the “Item” Div block.
Let's also add some padding to all sides of the image to give the images breathing room:
If we scroll from left to right using our mouse or trackpad (holding SHIFT while scrolling on Windows), we can preview all of our items that are visible in the “Camera” view.
However, the items spill out of the “Camera” view, which isn’t the desired effect. We want to see the items inside that view only when they’re pulled in by the interaction. To keep the images from spilling out:
With the “Camera” overflow set to hidden, when we try to scroll from left and right, we are unable to. This sets us up to configure our interaction, which will move the “Frame” from right to left.
For our example, our elements include the “Track” Section > the “Camera” Div block > the “Frame” Div block > the “Item” Div block > the image element.
Now, the goal of the interaction is to have the "Track" Div block trigger the interaction that moves the “Frame” Div block from right to left.
Select the “Track” Section and open the Interactions panel:
Now that we’ve set the "Track" Section to be our trigger, we need to select the “Frame” Div block in the Navigator. Selecting the “Frame” Div block while creating the interaction lets us add an animation to the “Frame” Div block.
Go back to the Interactions panel, and let’s create our interaction on the “Frame” Div block when the Track Section enters into the viewport:
The last thing we need to do is set the movement on the x-axis at 100% to -300vw.
How do we get -300vw? The Track Section is 400vw, but we only see the entire viewport's width (100vw) at any given time while we're scrolling.
To move all 4 items to the left, we need to set the movement on the x-axis at 100% to -300vw to move the Frame 400vw to the left. The 400vw also takes into account the first 100vw that we see before we start scrolling.
Click the eye icon in the Designer to view a live preview of your site. When testing out our new interaction, we can see that the start of the interaction starts too early, and also moves onto the next Section too soon.
We can offset the interaction in 2 ways:
To change the start of our animation to begin at 20%:
To change our animation to start when the "Track" Section is fully visible:
Now when we preview our live project, we can see the interaction starts when the first item is fully visible, but it still ends too soon. The interaction reaches the end of the "Track" Section while our interaction is still moving.
Reopen the Interactions panel, and Animation boundaries. Let’s offset the animation’s end by about 15%.
Now when we preview our project, we can scroll to the “Track” Section and our interaction horizontally scrolls our items until we reach our fourth and last item.
When setting up a horizontal scroll animation, one thing to keep in mind is the experience for tablet and mobile users. If someone on a mobile device tries to move left and right, the horizontal scroll interaction won't function as expected because it only works if your user scrolls up and down. Therefore, it’s not a very accessible experience for mobile users.
To set our interaction to happen only for desktop users:
Now that mobile devices won’t experience the interaction, we’ll need to optimize our layout for vertical scrolling on tablets and smaller devices:
From here, we can adjust the “Item” Div block’s style properties however we’d like to best fit our design’s vertical scroll experience.
Note: Because we made these changes on the Tablet breakpoint and because changes cascade down, the updates won't affect the Desktop breakpoint but will appear on both Mobile landscape and Mobile portrait breakpoints.
And that’s it! You’ve set up horizontal scrolling in Webflow.
Something went wrong while submitting the form. Please contact firstname.lastname@example.org