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

Yes! You can create a horizontal scrolling section in Webflow using third-party tools or integrations like GSAP (GreenSock) or ScrollTrigger. Below is a step-by-step guide:

1. Set Up Your Webflow Structure

• Create a Section (Div Block) and set it to Overflow: Hidden.
• Add a Wrapper (Div Block) inside the section and set its Display: Flex (Horizontal).
• Insert Content Blocks inside the wrapper to act as individual scrollable items.

2. Enable Webflow Interactions (Without Custom Code)

• Use Webflow’s Scroll Animation: You can create a scroll-based animation by setting up a while scrolling in view interaction.
• Move the Horizontal Wrapper: Apply a Move action to shift the wrapper on scroll.

3. Use GSAP + ScrollTrigger for Advanced Control

• Load GSAP and ScrollTrigger:

• Go to Project Settings > Custom Code > Inside and add:
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

• Add Custom Code in Webflow Page Settings (Before </body> tag):
  ```js
  gsap.registerPlugin(ScrollTrigger);
  let container = document.querySelector(".your-wrapper-class");

  gsap.to(container, {
  x: "-100vw",
  scrollTrigger: {
  trigger: container,
  start: "top top",
  end: "+=3000px",
  scrub: 1,
  pin: true
  }
  });
  ```

• Replace .your-wrapper-class with your actual Div class name.

4. Adjust and Preview

• Modify Animation Speed by changing scrub and end values.
• Test Responsiveness on smaller screens.

Summary

You can create a horizontal scrolling effect in Webflow using Webflow interactions for basic effects or GSAP + ScrollTrigger for more control. Use custom scripts inside Webflow’s Before tag section for a seamless integration.