I’m trying to use a gsap plugin module via cdn in my Next JS project.
So i started adding Script tags inside the Head tag in my _document.js
This is my code:
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
export default function Document() {
return (
<Html lang="en">
<Head>
<Script
src={
"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"
}
strategy="beforeInteractive"
/>
<Script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"
strategy="beforeInteractive"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Then i tried to use ScrollTrigger inside my index.jsx, like this:
ScrollTrigger.addEventListener("scrollEnd", () =>
console.log("scrolling ended!")
);
But i’m getting this error:
ReferenceError: ScrollTrigger is not defined
I’m not a CDN user, but in GSAP docs this is what they recommend. Since sometimes it has instant load, and it has a great amount of users.
I’ve already read the next js docs. That’s why i added these Script tags. But i am still getting this error…ERROR
