gsap scrollTrigger 反应不起作用

Question

我正在尝试转换这个codepen

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

反应成分

但它对我不起作用

这是我的 reactjs 代码

我注册了插件 scrollTrigger 并使用了 Ref

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,
        },
      });
    });
  }, []);

我不知道为什么不能像提供的演示那样工作

我在我的 jsx 中使用了 useRef