How can I make a section scroll horizontally while scrolling vertically in Webflow?

You can create a horizontal scrolling section triggered by vertical scroll in Webflow using native interactions combined with overflow settings and sticky positioning.

1. Prep Your Sections and Structure

• Wrap your horizontal content in a parent div (e.g., scroll-container).
• Inside that container, create another div (e.g., horizontal-track) that will hold all horizontally scrolling sections side by side (set display: flex).
• Each child inside horizontal-track will represent a horizontal section.

2. Style the Scroll Container

• Set the outer scroll-container to:

• Position: relative

• Overflow: hidden

• Height: 100vh (or taller if needed)

• Set the horizontal-track to:

• Display: flex

• White-space: nowrap

• Width equal to its children combined (e.g., if 3 sections at 100vw, set Width: 300vw)

• Position: sticky or absolute, depending on design

3. Enable Scrolling with Webflow Interactions

• Select the parent scroll-container.
• Go to the Interactions panel.
• Add a new Scroll animation > While scrolling in view.

Then:

• Assign an animation to the horizontal-track.
• Add a Move action on the X-axis:
• Start (<0%): X = 0%
• End (100%): X = -200% (if 3 sections total; use -[100 × (sections - 1)]%)

This ties the user’s vertical scroll to horizontal movement.

4. Adjust Section Height for Scroll Room

• The vertical scroll needs enough height to trigger the full animation timeline.
• Set the scroll-container height to be proportionate. Use this formula:
• Height = number of sections × 100vh
• So for 3 horizontal sections, set the container height = 300vh.

5. Optimization Tips

• Disable overflow on the body and parent containers to prevent unwanted scrollbars.
• Use .webp or compressed images inside the track to maintain performance.
• Enable will-change: transform on the horizontal-track to optimize GPU rendering.

Summary

To create horizontal scrolling driven by vertical scroll in Webflow: structure your layout using a flex container, style it with relative/hidden overflow and sticky or absolute positioning, and use Webflow’s "While scrolling in view" interactions to animate the X translation of your content based on scroll progress.