How to use Locomotive & GSAP ScrollTrigger together?

Design help Custom code
5

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