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

Question

此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

我不知道为什么我的 tween 无效，也不知道为什么 tweenChanges 已经存在，因为我没有看到滚动上发生任何事情。

Answer 1

项目中使用了两个库 — scrollmagic-plugin-gsap and the default one in scrollmagic。

scrollmagic-plugin-gsap 意味着配置 ScrollMagic、TweenMax、TimelineMax，而不是 ScrollMagic 和 gsap。参考usage docs

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

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

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

ScrollMagicPluginGsap(ScrollMagic, gsap);

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

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

React - GSAP w/ ScrollMagic - Cannot add Scene option 'tweenChanges', because it already exists

javascript

frontend

reactjs

gsap