GSAP ScrollTrigger with Next.js

Question

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:

Does anyone have a solution for this problem?

Answer 1

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";