Jump to content
Search Community

scrollTrigger does not see locomotiveScroll items

AlexanderGS test
Moderator Tag

Recommended Posts

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";


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 });

  }, [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



Link to comment
Share on other sites

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


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...