GSAP not works with NextJS properly

[Aditya Sutar]

This Error I'm getting this error on my website

 

 

 

First, I install the gsap using npm

 

then tried using it into my index.js 

 

 

Please me sort this thing

[Rodrigo]

Hi @Aditya Sutar and welcome to the GreenSock forums!

 

Unfortunately the URL of the image you posted seems broken so I'm unable to see the error you're reporting.

 

Also gsap is the core of the engine not a plugin, so there is no need to register it and you are not importing ScrollTrigger so that could be a source for an error as well.

 

Please give this a try:

import gsap from "gsap-trial/dist/gsap";
import { ScrollTrigger } from "gsap-trial/dist/ScrollTrigger";
import { ScrollSmoother } from "gsap-trial/dist/ScrollSmoother";

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

Finally here are some simple starters for using GSAP in a NextJS App:

 

ScrollTrigger Starter:

https://stackblitz.com/edit/nextjs-5cm4qn?file=pages%2F_app.js,pages%2Findex.js

 

ScrollSmoother Starter:

https://stackblitz.com/edit/nextjs-efumgr?file=pages%2F_app.js,pages%2Findex.js

 

If you keep having issues, please fork one of the examples and use your code in order to create a minimal demo (please try to keep the demos as small as possible).

 

Happy Tweening!

[Aditya Sutar]

Hi @Rodrigo,

oh sorry for that. Here is the error screen!

 

 

I tried the solution you gave above but its not working.

I solved this by install "gsap-trial" package and it solve my issue.

[Aditya Sutar]

And, I just faced this issue also 

 

[GreenSock]

It's totally fine to use gsap-trial on your local machine or on CodePen/CodeSandbox/Stackblitz, but it will NOT work if you deploy it anywhere else. ScrollSmoother is a members-only benefit of Club GreenSock and it looks like you haven't joined yet. https://greensock.com/club

 

As for the other error, it's very difficult to diagnose by just glancing at that screenshot. It sounds like maybe you didn't register ScrollTrigger as a plugin (ScrollSmoother is built on top of ScrollTrigger). 

 

If you need more help, please make sure you provide a minimal demo, like a CodeSandbox, CodePen, or Stackblitz so we can see the issue in context.