How to Implement a Smooth Horizontal Scroll with GSAP in Webflow
Easily add GSAP Horizontal scroll to your Webflow sections
Install the VisualDX Script
Firstly, make sure you have the VisualDX script before your </body>
Enable GSAP and ScrollTrigger Plugin
Copy Horizontal Scroll Attribute
Copy this attribute:
Paste the attribute into the Custom Attributes Name field of a Webflow Div.
Style Horizontal Scroll Wrapper
1. Set Flex Direction: Change the flex direction to horizontally.
2. Set Width: Ensure the width is set to 100% to occupy the full width of the container.
3. Set Height: Use 100svh for the height to make it responsive to the viewport height.
Style the Child Items (Sections)
2. Set Width: Ensure the width is set to 100svh to occupy the full width of the screen.
3. Set Height: Use 100svh for the height to make it responsive to the viewport height.
Publish
Sponsor the Magic and
Buy Me a Beer
VisualDX is a free JavaScript library made for Webflow nerds like yourself. No ads, no paywalls—just pure, unfiltered JavaScript magic to supercharge your builds. If it’s saving you time, making your development easier, or just making you feel like a wizard in the Webflow Designer, consider slinging a virtual coffee my way.
Think of it like buying me a pint for keeping your Webflow spells flowing.
You can support it here.
Cheers, legend!
This is a method based on community and soundness. If you can't afford it, don't worry... One of your fellow Webflow nerds has already helped you out by donating.