如何将scrollmagic和Gsap与nextjs集成

Question

我有一个包含以下组件的nextjs项目：

    import React, { PureComponent } from "react";
    import { Power3, TimelineMax } from "gsap";
    import ScrollMagic from "scrollmagic";

    export default class TextFade extends PureComponent {
      constructor(props) {
        super(props);
        this.myRef = React.createRef();
        this.controller = new ScrollMagic.Controller();
      }

  componentDidMount() {
  require("scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js");
    const tl = new TimelineMax()
      .from(this.myRef.current, 0.5, { opacity: 0 })
      .to(this.myRef.current, 0.5, { opacity: 0 }, 0.5);

    new ScrollMagic.Scene({
      triggerElement: this.myRef.current,
      triggerHook: 0.3,
      duration: "100%"
    })
      .setPin(this.myRef.current)
      .setTween(tl)
      //   .addIndicators()
      .addTo(this.controller);
  }

  render() {
    return (
      <div ref={this.myRef} className="bg-gray0 padding-top-6 padding-bottom-6">
        <div id="TextBlock">
          <h1>Heading to animation</h1>
          <p>ALso with text too</p>
        </div>
      </div>
    );
  }
}

我加载没有SSR的组件，因为scrollmagic依赖于拥有一个窗口。但是当我转到页面时，它给了我以下错误：

如何确保正确加载animation.gsap.js？ 我已经尝试过并进行搜索，并找到了imports-loader解决方案。但这似乎对我不起作用。

更新： 将缺少的组件加载到componentDidMount中解决了此问题，但又创建了一个问题：

更新我正在使用的版本：

"gsap": "^3.0.4",
"scrollmagic": "^2.0.7"

更新问题如答案中所述，scrollmagic不包含gsap脚本。我使用https://www.npmjs.com/package/scrollmagic-plugin-gsap

解决了这个问题

Answer 1

该软件包正在使用npm存储库中未包含的插件。我安装了：

"gsap": "^3.0.4",
"scrollmagic": "^2.0.7"

但找不到插件。