scrollTrigger does not see locomotiveScroll items

[AlexanderGS]

Good afternoon!

My scrollTrigger does not see the locomotiveScroll items. I have configured from scrollTrigger.scrollerProxy() documentation to make scrollTrigger and locomotiveScroll compatible. Everything looks fine when scrolling, but the item markers for scrollTrigger scroll along with the site scrolling.

 

Here is my hook, for scrollTrigger and LocomotiveScroll

import { useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import LocomotiveScroll from "locomotive-scroll";

gsap.registerPlugin(ScrollTrigger);

export function useLocoScroll(start) {
  useEffect(() => {
    if (!start) return;

    const scrollEl = document.querySelector('#main-section');

    if (start) {
      const locoScroll = new LocomotiveScroll({
        el: scrollEl,
        smooth: true,
        multiplier: 1,
        lerp: 0.06,
        class: 'is-reveal',
        tablet: {
          smooth: true
        },
        smartphone: {
          smooth: true,
        }
      });

      locoScroll.on("scroll", ScrollTrigger.update);
  
      ScrollTrigger.scrollerProxy(scrollEl, {
        scrollTop(value) {
          return arguments.length 
          ? locoScroll.scrollTo(value, { duration: 0, disableLerp: true }) 
          : locoScroll.scroll.instance.scroll.y;
        },
        getBoundingClientRect() {
          return { 
            top: 0, 
            left: 0, 
            width: window.innerWidth, 
            height: window.innerHeight 
          };
        },
        pinType: scrollEl.style.transform ? "transform" : "fixed"
      });
  
      ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
      ScrollTrigger.defaults({ scroller: scrollEl });
      ScrollTrigger.refresh();
    }


  }, [start]);
}

 

I have noticed one interesting behaviour of the scrollTrigger. When I resize the screen, these markers are positioned where they should be, i.e. under my items. I tried to solve this by removing the start argument from useEffect. This seems to solve my problem with the markers, but then the scroller from locomotiveScroll is replaced by the standard browser scroller. How can this be fixed?

Example codesandbox

 

 

[mvaneijgen]

There is a lot of content out there how to setup locomotive scroll with ScrollTrigger, but this is a bit old at the moment, because GSAP has it own smooth scroll aptly named SmoothScroll which perfectly works with ScrollTrigger, so if you don't have a specific need for locomotive scroll I would suggest going with SmoothScroll, will save you a lot of time. 

 

See the Pen ExPdqKy by GreenSock (@GreenSock) on CodePen