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?

When integrating Locomotive Scroll with GSAP animations, they can conflict because Locomotive hijacks scroll behavior—which disrupts how GSAP detects scroll position using native browser events.

1. Understand the Conflict

• GSAP’s ScrollTrigger (or any scroll-dependent logic) relies on the native scroll.
• Locomotive Scroll uses a virtual scroll, not triggering regular scroll events.
• As a result, any scroll-triggered animation like a navbar color change may not fire or update correctly.

2. Use GSAP ScrollTrigger with Locomotive Scroll

• You must sync GSAP's ScrollTrigger plugin with Locomotive Scroll to keep animations and scroll position aligned.
• After initializing both libraries, use the ScrollTrigger’s scrollerProxy method to tell GSAP to follow Locomotive’s virtual scrolling.

3. Setup Example (Apply Conceptually in Webflow)

• After initializing Locomotive on your scroll container (e.g., a div with data-scroll-container):
• In your custom code, use ScrollTrigger.scrollerProxy() to define how ScrollTrigger queries scroll offset.

Example adjustments:

• Replace window with your scroll container element when setting up ScrollTrigger.
• Implement ScrollTrigger refresh after Locomotive update.

4. Ensure Locomotive Scroll Initializes Correctly

• Make sure Locomotive is initialized after the page has fully loaded.
• Use Webflow’s load event or place scripts in the site-wide Before tag area in Project Settings to prevent DOM selection issues.

5. Include ScrollTrigger Refresh

• Always call ScrollTrigger.refresh() after your Locomotive Scroll setup to ensure proper positioning and triggering of animations.

6. Check Navbar Animation Trigger Logic

• If your navbar color change depends on scroll value (e.g., window.scrollY > 100), replace it with a listener tied to Locomotive’s scroll event:
• Example: scroll.on('scroll', obj => { /* check obj.scroll.y */ })

Summary

To make your GSAP navbar scroll animations work with Locomotive Scroll in Webflow, you need to set up GSAP’s scrollerProxy to integrate with Locomotive's virtual scroll and adjust any direct scroll triggers to use Locomotive’s scroll event system. Ensure you refresh ScrollTrigger post-init and migrate from native window.scroll detection to Locomotive's scroll coordinates.