Why does scrollTrigger not work in react js?

[AlexanderGS]

Created an About component as an example. Added a couple of other components (Section, Content are just 'section and div' tags). Prepared useLayoutEffect for animations. 

But I see that in the end my animation doesn't work, although the elements are there, I console, but the element doesn't react in any way. What could be the problem?

 

I forgot to mention that I use locomotiveScroll for scrolling. Perhaps that's what's causing the problem.

I have changed the codesandbox slightly.  codesandbox

 

 

 

import React, { useEffect, useLayoutEffect } from "react";
import LocomotiveScroll from "locomotive-scroll";
import "locomotive-scroll/src/locomotive-scroll.scss";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import about from "./about.module.scss";

gsap.registerPlugin(ScrollTrigger);

export default function App() {
  useEffect(() => {
    const scrollEl = document.querySelector("#main-section");

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

  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      let timeline = gsap.timeline({ delay: 0.5 });

      timeline
        .from(`.${about.about}`, {
          scrollTrigger: {
            trigger: `.${about.about}`,
            start: "+100px top",
            end: "bottom bottom",
            markers: true,
            scrub: true
          }
        })
        .from(`.${about.subtitle}`, {
          scrollTrigger: {
            trigger: `.${about.about}`,
            start: "top top",
            scrub: true,
            pin: true
          },
          x: 100,
          opacity: 0.5,
          duration: 2,
          delay: 2
        });
    });

    return () => ctx.revert();
  });

  return (
    <div id="main-section">
      <section className={about.about} data-scroll-section>
        <div className={about.about__content}>
          <h2 className={about.subtitle}>600ds.</h2>
        </div>
      </section>
    </div>
  );
}

 

[GreenSock]

Welcome to the forums, @AlexanderGS! First of all, good job using gsap.context() and doing proper cleanup in React! You must have read the article:

 

You're actually making one of the most common mistakes - using nested ScrollTriggers. It's logically impossible for a playhead to be controlled BOTH by a parent timeline AND the scrollbar position (they could be going in completely different directions). 

 

I was actually pretty confused by what you were trying to do with your first .from() animation anyway. There's literally no animation whatsoever in it. And why are you using a 0.5 delay on the parent timeline and a 2-second delay on the 2nd from()? 

 

I wonder if you intended something more like: 

useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      let timeline = gsap.timeline({ 
        scrollTrigger: {
          trigger: `.${about.about}`,
          start: "top top",
          scrub: true,
          pin: true
        } 
      });

      timeline.from(`.${about.subtitle}`, {
          x: 100,
          opacity: 0.5,
          duration: 2,
          delay: 2
        });
    });

    return () => ctx.revert();
});

🤷‍♂️

 

Lastly, it appears as if you're using LocomotiveScroll in your CodeSandbox which is fine, but we can't really support that since it's a 3rd party (non-GreenSock) product. You'll need to wire it up using ScrollTrigger.scrollerProxy(). Or of course it'd be much simpler to just use ScrollSmoother instead (fully supported and integrated with ScrollTrigger out-of-the-box).