与GSAP和ScrollMagic进行反应-补间无效

Question

我正在尝试为每个节滚动触发图像的显示动画，而我正在使用GSAP + ScrollMagic进行操作。

问题是，我收到一个错误消息，说补间对象无效。

ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject

这是我要在组件安装时触发的动画代码：

   useEffect(() => {
    const scrollControler = new ScrollMagic.Controller();
    const imageReveal = CSSRulePlugin.getRule(".image-container:after");
    const tl = new TimelineLite();
    const tween = tl.to(imageReveal, {
      duration: 1,
      cssRule: { width: "0%" },
      ease: "power2.easeInOut",
      paused: true
    });

    new ScrollMagic.Scene({
      triggerElement: ".image-section",
      triggerHook: 0
    })
      .setTween(tween)
      .addTo(scrollControler);
  }, []);

为什么我的补间无效？

这是代码为（转到/滚动路线）的沙箱] :: https://codesandbox.io/embed/reveal-effect-with-reactjs-and-greensock-5i8pp?fontsize=14&hidenavigation=1&theme=dark

我正在尝试为每个节滚动触发图像的显示动画，而我正在使用GSAP + ScrollMagic进行操作。问题是我收到一个错误消息，说补间对象...

Answer 1

更新：我必须安装scrollmagic-plugin-gsap依赖项才能使Scroll Magic与GSAP 3一起使用。

在文件的开头，我们必须向Gsap注册Scroll Magic。否则，将出现诸如“未定义TweenMax”的错误。