How can I resolve issues with my Webflow project when adding Locomotive Scroll to achieve smooth scrolling, causing my previously created GSAP animation for navbar color change on scroll to stop working?

You’re encountering a conflict between Locomotive Scroll and GSAP scroll-triggered animations, likely because Locomotive Scroll overrides the default scroll behavior, which disrupts how GSAP interprets scroll events.

​

1. Understand the Core Conflict

​

• Locomotive Scroll enables smooth scrolling by using a virtual scroll container, which means it doesn’t scroll the window, but instead scrolls a custom container.
• GSAP ScrollTrigger, by default, listens to the window scroll position, so it won’t detect scrolling changes made by Locomotive unless configured to do so.

​

2. Enable ScrollTrigger Integration with Locomotive Scroll

​

To fix this, you need to sync GSAP’s ScrollTrigger with your Locomotive scroll instance:

​

• After both GSAP and Locomotive Scroll are initialized, use ScrollTrigger’s scrollerProxy() method.
• Target the data-scroll-container (Locomotive’s scroll wrapper) in scrollerProxy().

​

Example:

• Set up ScrollTrigger’s proxy to use Locomotive's scrolling:

​

  ```javascript

  gsap.registerPlugin(ScrollTrigger);

​

  const scrollContainer = document.querySelector("[data-scroll-container]");

  const locoScroll = new LocomotiveScroll({

    el: scrollContainer,

    smooth: true

  });

​

  ScrollTrigger.scrollerProxy(scrollContainer, {

    scrollTop(value) {

      return arguments.length 

        ? locoScroll.scrollTo(value, 0, 0) 

        : locoScroll.scroll.instance.scroll.y;

    },

    getBoundingClientRect() {

      return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};

    },

    pinType: scrollContainer.style.transform ? "transform" : "fixed"

  });

​

  locoScroll.on("scroll", ScrollTrigger.update);

  ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

  ScrollTrigger.refresh();

  ```

​

• Do not use raw <script> tags in Webflow custom code embeds; instead, place your modified JavaScript into the Before </body> tag section in Webflow’s Page Settings or Site Settings.

​

3. Adjust GSAP ScrollTrigger Animations

​

After setting up scrollerProxy(), make sure all your ScrollTrigger animations specify the custom scroller:

​

• For each ScrollTrigger, add:

  ```javascript

  scroller: "[data-scroll-container]"

  ```

​

• Example:

  ```javascript

  gsap.to(".navbar", {

    backgroundColor: "#fff",

    scrollTrigger: {

      trigger: ".trigger-element",

      start: "top top",

      end: "bottom top",

      scrub: true,

      scroller: "[data-scroll-container]"

    }

  });

  ```

​

4. Confirm Navbar Animation Works on Custom Scroll

​

• Ensure your navbar element and animation trigger correctly reference scrolled positions within the smooth scroll container.
• You may need to adjust start and end positions since Locomotive Scroll might offset elements differently.

​

Summary

​

To make your GSAP navbar scroll animations work with Locomotive Scroll in Webflow, use ScrollTrigger’s scrollerProxy() to sync scroll behavior and ensure all ScrollTrigger animations declare the correct custom scroller. This enables accurate scroll detection and restores expected animation behavior.