How can I make a section scroll horizontally while scrolling vertically in Webflow?
TL;DR
- Structure a section with a flexbox wrapper containing content slides arranged in a row, and set the section to overflow hidden.
- Wrap it in a tall outer div matching the total scroll length (e.g., 400vh for 4 slides), then use Webflow’s "While page is scrolling" interaction to animate the wrapper’s X-axis from 0% to -300%.
To create a horizontally scrolling section triggered by vertical scroll in Webflow, you'll use native Webflow interactions and set up a custom layout with overflow: hidden settings.
1. Structure Your Section
- Create a section div (e.g.,
horizontal-scroll-section) that will contain your horizontal content. - Inside it, add a wrapper div (e.g.,
scroll-track) that will move horizontally. - Inside the
scroll-track, place your content divs in a row (e.g.,slide-1,slide-2, etc.).
2. Set CSS Styles
- Set the section (
horizontal-scroll-section) to: - Position: relative
- Overflow: hidden
- Set the scroll-track to:
- Display: flex
- Flex direction: row
- Position: absolute
- Top/Left: 0
- Height: 100%
- Width: Calculate it (e.g., 400vw for 4 slides)
- Slides (content blocks) should have:
- Width: 100vw
- Height: 100vh (or required height)
3. Wrap in Scroll Trigger Container
- Wrap the
horizontal-scroll-sectionin an outer div (e.g.,scroll-container) and: - Set height to match the number of slides × 100vh
- Example: For 4 slides, height = 400vh
4. Use Webflow Interactions
- Go to the Interactions panel.
- Add a Page Trigger: While page is scrolling.
- Set interaction to target the
scroll-track. - Add a Move Transform animation:
- X-axis: animate from
0%to-300%if you have 4 slides (each 100vw) - Adjust scroll range (% of page scroll) as needed to time the animation.
5. Ensure Smooth User Experience
- Be sure to disable scroll snapping if enabled.
- You can add a sticky header/footer if needed above this section.
Summary
To make a section scroll horizontally on vertical scroll in Webflow, structure your content inside a wide flexbox wrapper, set an outer container height equal to the scroll animation length, and use a While scrolling in view page trigger to animate the horizontal movement of the content.