javascriptreactjsnext.jsgsap

GSAP ScrollTrigger with Next.js

I'm trying to use ScrollTrigger with Next.js:

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

I got this error: enter image description here

Does anyone have a solution for this problem?

Solution

  • UMD option

    You can either load the UMD version (located under the dist/ subdirectory).

    import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

    ESM option

    OR use the default ESM format and transpile gsap library in Next.js.

    To do so, you'll first need to install next-transpile-modules.

    $ npm install next-transpile-modules

    Then some extra setup in your next.config.js file is required.

    // next.config.js
const withTM = require("next-transpile-modules")(["gsap"]);

module.exports = withTM({});

    You'll be then able to import it the way you currently are.

    import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";