如何将 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 依赖于 window。但是当我转到页面时，它给了我以下错误：

如何确保 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"

但找不到插件。

如何将 scrollmagic 和 Gsap 与 nextjs 集成

How to integrate scrollmagic and Gsap with nextjs

reactjs

scrollmagic

next.js