Get GSAP (Bonus Packages) running on Next.js and Vercel

[Christian L.]

Hey all!

Just posting this here, because it could come in handy for people desperately trying to get the club packages running in production with Next.js deployed to Vercel. I tried all the things from the install docs and everything I found in this forum (1), nothing worked until I simply tried to deploy the gsap-bonus.tgz) and install it from there. Now it works like a charm, preferred to have it from NPM, but did not manage to do so unfortunately.

 

Maybe I missed sth important along the way, but almost gave up. If this is an issue your familiar with I highly recommend mentioning this in your docs! (Apologies if it is included and I did not saw the forrest for the trees after spending so much time).

 

Btw — I love GSAP, and after using it for years I finally joined the Club (ShockinglyGreen).

(1) Things I did / tried:

• Added the repo token to my environment variables on Vercel
• Installed next-transpile-modules to include the packages inside my next.config.js
• Assigning SplitText to a const to avoid tree-shaking (in addition to registering the plugin)
• Tried to check if the process is running on the server or the client

[ZachSaucier]

Hey Christian and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership! Sorry to hear about your troubles. 

 

Did you see the information about GreenSock's private registry? With it you can install GSAP with NPM without having to manually download and use the .tgz file. It's also talked about in the modules installation video. 

 

Thanks for sharing how you got things working in your environment.

[Christian L.]

Hey Zach, thanks for getting back, much appreciated.

 

Yeah, I've watched the video and followed the docs (did that first) and I've added the token to my production env vars as well, still no luck. There is some additional info on the Vercel docs regarding installs from private repos as well, no luck either. It worked totally fine locally, just did not manage to run it on Vercel.

 

Anyway, a bit pressed for time on this project, so will follow the "don't touch if it works" credo for now

 

Will go with GSAP (as a sidenote, I am switching back from Framer Motion, no offense on FM here but maybe it's nice to hear for you) in my next project again and will try to get the private repo running, will report back on this if you want me to. 

[ZachSaucier]

18 minutes ago, Christian L. said:

I am switching back from Framer Motion, no offense on FM here but maybe it's nice to hear for you

It is nice to hear! What are your reasons for switching back?

 

19 minutes ago, Christian L. said:

will try to get the private repo running, will report back on this if you want me to

Sure, that'd be helpful.

[Christian L.]

2 minutes ago, ZachSaucier said:

It is nice to hear! What are your reasons for switching back?

Upfront: It's all a matter of personal preference as well and while I like to try new tools, it sometimes takes to get used to it so maybe it was more my "fault" in the end.

 

Framer Motion is great from a brand perspective (used to work as a designer  ) but I somehow felt it did not give me the control I was used to have from GSAP, e.g. think of doing a complex modal animation with the timeline object, doing this with Framer felt way more complex than GSAP. Again I am used to using GSAP...

 

I initially was pro Framer as it was designed specifically with React in mind and I felt GSAP did not really "fit" that...

 

That being said it took me a bit, to find out how to best to animations in React (and GSAP is pretty close to vanilla JS).

Again, keep up the great work and happy to finally support you for your amazing work.