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

Question

这个的目标Codepen (进入负责/scroll路由的scrollExample文件夹)是触发部分滚动上的图像显示效果。

我是如何制作动画的:

首先，我使用 GSAP 的 CSSRulePlugin 来获取我想要设置动画的伪元素。 之后，我创建了一个时间轴来放置补间并编写动画属性。

现在谈论 ScrollMagic，首先我创建了一个 Controller ，然后创建了一个场景。在场景中，我传递了要触发动画的元素选择器以及持续时间(像素数量)。最重要的部分是设置将在部分滚动上触发的补间。

 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 已经存在，因为我没有看到滚动上发生任何事情。

Answer 1

项目中使用了两个库 - scrollmagic-plugin-gsap以及 scrollmagic 中的默认值.

scrollmagic-plugin-gsap 旨在配置 ScrollMagic、TweenMax、TimelineMax，而不是 ScrollMagic 和gsap。引用usage docs

仔细观察，您的项目中不需要 scrollmagic-plugin-gsap，因为您可以使用 scrollmagic 库中提供的插件。

由于 scrollmagic 库中的 animation.gsap.js 已导入 App 中，请卸载 scrollmagic-plugin-gsap code> 并从 scrollExample 中删除这些行:

import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

控制台中的错误应该消失。记录该错误是因为 scrollmagic-plugin-gsap 中的插件和 scrollmagic 中的插件都添加了 tweenChanges 选项。