Creating a horizontal scrolling section in Webflow often requires custom interactions or external libraries to go beyond native capabilities. Here's how you can do it using third-party tools like GSAP (GreenSock) and ScrollTrigger, which are commonly used and Webflow-compatible.
div
block (the scroll container) with flex children to represent the horizontal sections.Go to Page Settings > Page Custom Code and add the required script references inside the <head>
or before the closing <body>
tag.
CDN links:
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js
Inside the Before
tag, add a script that looks for your horizontal scroll container and activates horizontal scrolling using ScrollTrigger.
.horizontal-wrapper
..horizontal-track
.To create a horizontal scroll in Webflow with third-party tools, structure your content using horizontal flex containers, and implement GSAP + ScrollTrigger via custom code. Webflow handles layout; the JavaScript handles scroll transformation.