javascript - React-GSAP w/ScrollMagic-无法添加场景选项 'tweenChanges'，因为它已经存在

此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 。
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中的插件和scrollmagic中滚动的插件都添加了tweenChanges选项。

关于javascript - React-GSAP w/ScrollMagic-无法添加场景选项 'tweenChanges'，因为它已经存在，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60565901/