与 GSAP 和 ScrollMagic 反应 - Tween 无效

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

为什么我的补间无效？

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

Answer 1

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

在文件的开头我们必须向 Gsap 注册 Scroll Magic。否则，会出现 "TweenMax was not defined" 之类的错误。

import * as ScrollMagic from "scrollmagic";
import { gsap } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

您必须直接将补间传递给场景的 setTween 方法，而不是创建时间轴。

.setTween(imageReveal, 0.4, { scale: 0, autoAlpha: 0 })

与 GSAP 和 ScrollMagic 反应 - Tween 无效

React with GSAP and ScrollMagic - Tween is not valid

javascript

css

frontend

reactjs

gsap