Flawless Horizontal Scroll with Pro-Level CSS Techniques
How to build horizontal scrolling sections in Webflow using only one interaction that works for any number of sections with any sizes. This animation observes the user's downward scroll behavior and translates a separate div block to the left to achieve a cool horizontal scroll effect. We'll look at some pro level css tricks with overflow, flexbox, translateX and position sticky to devise a horizontal scrolling container system that we only need to set up once and works even if we change the sizes of the nested sections.
This article is a summary of my YouTube tutorial so you might want to check that out first! It can be tough to use words to describe what I'm clicking in Webflow, but this is my best shot!
Step 1: Set Up Your Layout
Start with a basic structure: create two full-page divs (one for the start, one for the end), and slap a middle div in there called horizontal scroll wrap—this will house the horizontal scrolling content.
Inside this, create a div called height, which will handle the height and the speed of the scroll. Set it to 400vh to give us enough scroll space, and give it a gradient background so you can visualize the effect more easily.
Step 2: Sticky Situation
Inside your height div, add another div called sticky. As the name suggests, set its position to sticky with top: 0. Now, make sure sticky is positioned relative to height, not the entire body. This ensures the sticky effect works within that section.
Make sticky a full-screen element by setting its width and height to 100%. Then, drop another div inside it—call this one mover because we’re gonna make it move horizontally. Leave mover set to display: flex.
Step 3: Horizontal Scroll Magic
Next, create your sections inside mover. Use actual section elements, and give them a class of full-page. Set each section’s height to 100vh and width to 100vw, making them span the full viewport. Add some placeholder text so you can see them in action.
You should now see the sections stacked horizontally. If they’re not behaving as expected, make sure you’ve avoided setting any overflow styles on parent elements—those can break position: sticky.
Step 4: Add the Interaction
Now for the fun part: animating the horizontal scroll. Select the height div, go to interactions, and create a new scroll animation. You want it to start when height comes fully into view and end when it leaves the screen.
At the 0% mark of your scroll animation, set mover's X position to 0. At the 100% mark, move mover to -100vw, so it scrolls completely off the screen as you scroll down.
Step 5: Fine-Tune with Offsets
You might notice the interaction ending a bit early. To fix that, use an additional div inside mover (call it Flex offset). Set it to display: flex as well and give it some negative margin (say, -100vw). This tweaks the timing so that the horizontal scroll finishes when it’s supposed to.
Step 6: Tidy Up
To wrap this up, you might need to tweak the padding or margin on the bottom of your sticky and horizontal scroll wrap divs to prevent overlapping. Set appropriate margins, and make sure everything fits snugly into place.
Conclusion
Boom! You’ve got horizontal scrolling in Webflow. Feel free to add custom layouts or even integrate this with CMS content to really level up your design game. Horizontal scrolling sections give your site a modern, interactive feel, so get creative and make something awesome.
Hope this tutorial helps you build some epic Webflow projects. See you in the next one!