我正在尝试为每个部分滚动触发图像的显示动画，而我正在使用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
更新：我必须安装scrollmagic-plugin-gsap依赖项才能使Scroll Magic与GSAP 3一起使用。
在文件的开头，我们必须向Gsap注册Scroll Magic。否则，将出现诸如“未定义TweenMax”的错误。
import * as ScrollMagic from "scrollmagic";
import { gsap } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
ScrollMagicPluginGsap(ScrollMagic, gsap);
无需创建时间轴，您必须直接将补间传递到Scene的setTween方法。
.setTween(imageReveal, 0.4, { scale: 0, autoAlpha: 0 })
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句