此Codepen的目标（转到负责/ scroll路径的scrollExample文件夹）是要触发部分滚动上的图像显示效果。
我如何制作动画：
首先，我使用GSAP的CSSRulePlugin来获取我要设置动画的伪元素。之后，我创建了一个时间轴来放置补间并编写动画属性。
现在谈论ScrollMagic，首先创建一个Controller，然后创建一个Scene。在场景中，我传递了想要触发动画的元素选择器以及持续时间（像素数量）。最重要的部分是设置将在部分滚动中触发的补间。
componentDidMount() {
const imageReveal = CSSRulePlugin.getRule(".image-container:after");
const timeline = new TimelineLite();
timeline.from(imageReveal, {
duration: 0.4,
cssRule: { scale: 1.2 }
});
new ScrollMagic.Scene({
triggerElement: "#scrollStarts",
duration: 100
})
.setTween(timeline)
.addTo(this.controller); // assign the scene to the controller
}
问题：滚动动画无法正常工作，并且出现以下错误：
[static] ScrollMagic.Scene -> Cannot add Scene option 'tweenChanges', because it already exists.
(animation.gsap) -> ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject
我不知道为什么我的补间是无效的，以及为什么tweenChanges已经存在，因为我没有看到滚动发生任何事情。
项目中使用了两个库-scrollmagic-plugin-gsap，默认库中有scrollmagic-plugin-gsap。
scrollmagic是要配置为scrollmagic，scrollmagic-plugin-gsap，ScrollMagic，而不是TweenMax和TimelineMax。请参考ScrollMagic
仔细观察，在您的项目中不需要gsap，因为您可以滚动使用usage docs库中提供的插件。
由于scrollmagic-plugin-gsap库中的scrollmagic已导入animation.gsap.js中，请卸载scrollmagic并从App中删除这些行：
scrollmagic-plugin-gsap控制台中的错误应消失。记录此错误是因为scrollExample中的插件和import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
ScrollMagicPluginGsap(ScrollMagic, gsap);
中的插件都添加了scrollmagic-plugin-gsap选项。