Webflow sync, pageviews & more.
NEW

Is there a tutorial available for creating a horizontal scrolling section on Webflow using third party tools or integrations?

TL;DR
  • Design the horizontal layout in Webflow using flex containers with fixed-width sections and hidden overflow.
  • Add GSAP and ScrollTrigger via CDN in custom code, then script horizontal scroll behavior by targeting your Webflow elements.
  • Ensure a paid Webflow plan for custom code, publish to test functionality, and disable conflicting native interactions.

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.

1. Use Webflow for Structure and Styling

  • Design the layout in Webflow using a div block (the scroll container) with flex children to represent the horizontal sections.
  • Set the container's display to Flex – Horizontal (row) and Overflow: Hidden.
  • Give the inner content divs a set width (e.g., 100vw) so they take up full screen width.

2. Integrate Custom Code with GSAP + ScrollTrigger

  • Go to Page Settings > Page Custom Code and add the required script references inside the <head> or before the closing <body> tag.

  • CDN links:

    • GSAP: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js
    • ScrollTrigger: 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.

3. Adjust Script to Connect Webflow Elements

  • Use class or ID selectors from your Webflow elements to match the GSAP code.
  • Example:
  • Give your horizontal wrapper a class like .horizontal-wrapper.
  • Give the scrolling track a class like .horizontal-track.
  • Then initialize horizontal scroll behavior based on scroll distance.

4. Hosting & Considerations

  • You must host the site on a Webflow-paid plan to use custom JavaScript.
  • Preview mode may not render the scroll correctly—publish the site to test the functionality.
  • If using interactions, be sure to disable Webflow’s native scroll interactions for the horizontal section to avoid conflicts.

Summary

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.

Rate this answer

Other Webflow Questions