Flawless Horizontal Scrolling in Webflow

🚨 IMPORTANT UPDATE/FIX 28 SEP 2023 IN PINNED COMMENT BELOW 👇

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.

// CLONE IT (affiliate link)
👯‍♂️ https://try.webflow.com/cloneable-is-...

// FREE resources
✂️ Code Snippet Library: https://code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: https://www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: https://www.webbae.net/roadmap-to-lea...

// Premium content
🤝 Patreon:   / webbae  
🕸️ Advanced Webflow Course (201): https://www.webbae.net/product/webflo...

// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): https://www.creativecodingclub.com/bu...

// Connect
🙋‍♀️ Join the Discord:   / discord  
🐥 Follow Me!   / webisbae