Search code examples
reactjsnext.jsscrollmagic

How to integrate scrollmagic and Gsap with nextjs

I have a nextjs project with the following component:

    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>
    );
  }
}

I load the component withouth SSR since scrollmagic depends on having a window. But when i go to the page it gives me the following error: Error

How can i make sure that the animation.gsap.js is loaded correctly? I already tried and searching for this and found some solutions with imports-loader. But this didn't seem to work for me.

Update: Loading the missing component in componentDidMount solved this issue but created another one: Second error

Update Versions i am using:

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

Update The problem was as described in the answer that scrollmagic did not include the gsap scripts. I solved the issue by using https://www.npmjs.com/package/scrollmagic-plugin-gsap

Solution

  • The package is using plugins that are not included in the npm repo. I installed :

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

    but couldn't find the plugins. enter image description here