How to use Locomotive & GSAP ScrollTrigger together?

Hey everyone,
I’m pretty new to webflow and coding, so this is my first-ever project of my own design. The thing that I want is to create some light interactions on scroll, change navcolor on the scroll and allow smooth scrolling.

I’ve created the animation for navbar color (using GSAP) change successfully, but once I add a locomotive scroll to the page before body tag everything stops working!

I have no idea about the possible solution, so would be happy to hear your thoughts


Here is my site Read-Only: https://preview.webflow.com/preview/jcfamilyoffice?utm_medium=preview_link&utm_source=designer&utm_content=jcfamilyoffice&preview=f1884b690730a2f3bf4806b2f6bb88c0&workflow=preview

Why would you need to use LS? GSAP has scrolltrigger.

LS for Smooth Scroll and to set values for different scroll-speed of elements
GSAP’s smoother scroll library is paid

I use GSAP in this project only for purposes of changing navbar color on scroll

For anyone interested:

With a lot of pain I figured our how to make these two work together.
Below you can see what I have in my before body tag in the project with an example of working GSAP animation (//Nav Olive)

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.1/dist/locomotive-scroll.min.js"></script>
  
<script>
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  scroller: '[data-scroll-container]',
  markers: false
});

var scroll = new LocomotiveScroll( {
    el: document.querySelector( '[data-scroll-container]' ),
    smooth: true,
    multiplier: 1.0,
    getDirection: true,
});

// Update scroll position
scroll.on( 'scroll', ( instance ) => {
    ScrollTrigger.update();
    document.documentElement.setAttribute( 'data-scrolling', instance.direction );
});

// Scroll position for ScrollTrigger
ScrollTrigger.scrollerProxy( '[data-scroll-container]', {
    scrollTop( value ) {
        return arguments.length ? scroll.scrollTo( value, 0, 0 ) : scroll.scroll.instance.scroll.y;
    },
    getBoundingClientRect() {
        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
    },
    pinType: document.querySelector( '[data-scroll-container]' ).style.transform ? "transform" : "fixed"
} );


ScrollTrigger.addEventListener( 'refresh', () => scroll.update() );
ScrollTrigger.refresh();

// Nav Olive
$(".section.is--about").each(function (index) {
  let triggerElement = $(this);
  let targetElement = $(".navbar");
  console.log(triggerElement);
  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "top top",
      end: "top top",
      scrub: 0.5
    }
  });
  tl.to(targetElement, {
    backgroundColor: "#737372",
    duration: 0.5
  });
});
1 Like