gsap scrollTrigger with react not working

Question

i'm trying to convert this codepen

pen : https://codepen.io/designcourse/pen/gOjZKOO

to react component

but it not working for me

this is my reactjs code

i registred the plugin scrollTrigger and make useRef

const App = () => {

  gsap.registerPlugin(ScrollTrigger);

  const containerRef = useRef(null);
  const sectionsRef = useRef([]);
  const textsRef = useRef([]);
  const maskRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const sections = sectionsRef.current;
    const texts = textsRef.current;
    const mask = maskRef.current;

    sections.push(...container.querySelectorAll('.container section'));
    texts.push(...container.querySelectorAll('.anim'));

    let scrollTween = gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: 'none',
      scrollTrigger: {
        trigger: container,
        pin: true,
        scrub: 1,
        end: '+=3000',
        markers: true,
      },
    });

    console.log(1 / (sections.length - 1));

    gsap.to(mask, {
      width: '100%',
      scrollTrigger: {
        trigger: '.wrapper',
        start: 'top left',
        scrub: 1,
      },
    });

    sections.forEach((section) => {
      let text = section.querySelectorAll('.anim');

      if (text.length === 0) return;

      gsap.from(text, {
        y: -130,
        opacity: 0,
        duration: 2,
        ease: 'elastic',
        stagger: 0.1,
        scrollTrigger: {
          trigger: section,
          containerAnimation: scrollTween,
          start: 'left center',
          markers: true,
        },
      });
    });
  }, []);

i do not why is not working like demo provided

i used useRef in my jsx

gsap scrollTrigger with react not working

0 Answers0