I can't see ScrollTrigger in Node Modules

[sybilrondeau 8 Likes (Newbie)]

Hi ! 

 

I try to install ScrollTrigger on my project (prod with Parcel). So I downloaded again gsap to access the new gsap-bonus.tgz file and yarn add it to my project. But I can't see the ScrollTrigger in Node Modules ! What did I do wrong ? 

Thank you for your help !

[bdrtsky 32 Likes (Newbie)]

ScrollTrigger is a free plugin, you won't see it in gsap-bonus.tgz

[sybilrondeau 8 Likes (Newbie)]

Ok sorry I can see it ! Thanks for your help !

[sybilrondeau 8 Likes (Newbie)]

But I still get this error : 

 

[sybilrondeau 8 Likes (Newbie)]

why do I have a package directory like this ? Is it ok ? 

[ZachSaucier 7,000 Likes (Superhero)]

7 minutes ago, bdrtsky said:

ScrollTrigger is a free plugin, you won't see it in gsap-bonus.tgz

gsap-bonus.tgz includes free and paid plugins, so you're incorrect here.

 

Hey sybilrondeau and welcome to the GreenSock forums. 

 

22 minutes ago, sybilrondeau said:

why do I have a package directory like this ? Is it ok ? 

It looks like you unzipped the .tgz file there which isn't the way to install it.

 

What you should do is leave the .tgz file zipped, yarn add gsap-bonus.tgz which will add it to the node_modules directory under gsap and then you should be able to import it correctly.

 

You can delete the /package directory that you're showing in the screenshot (the one outside of node_modules).

[GreenSock 15,606 Likes (Superhero)]

5 minutes ago, ZachSaucier said:

What you should do is leave the .tgz file zipped, yarn add gsap-bonus.tgz which will add it to the node_modules directory under gsap and then you should be able to import it correctly.

 

Sounds like @ZachSaucier is exactly right, and he made some very useful install videos and instructions too at https://greensock.com/install in case that helps.

 

Happy tweening!

[sybilrondeau 8 Likes (Newbie)]

Ok ! I did that, but I still have the "can't resolve the dependencie" error...

That's why I don't understand. When I write "import {ScrollTrigger} from {gsap/ScrollTrigger}", that means I should see ScrollTrigger.js directly in the gsap directory in Node Module, right ? Like SplitText or ScrollToPlugin or morphSVG ? 

[ZachSaucier 7,000 Likes (Superhero)]

My guess is that you did 

yarn add gsap

sometime before GSAP 3.3 came out which would explain why ScrollTrigger is not found in the node_modules.

 

Then you didn't update GSAP or add the .tgz file that you downloaded. Once you update GSAP or install via the (new) .tgz file, ScrollTrigger should show up under /node_modules/gsap. If it's showing up there but your imports are not working still, then it might be because you're trying to import the wrong version of the file. I don't know anything about Parcel but you could try loading the UMD/CommonJS version instead:

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

gsap.registerPlugin(ScrollTrigger);

As @GreenSock said, the install video walks you through the whole process.

[sybilrondeau 8 Likes (Newbie)]

OK finally it works ! Thank you ! I am very newbie to all that  . Can't wait to learn ! Thank you again. 

 

[sybilrondeau 8 Likes (Newbie)]

Well it doesn't work finally... I was with gsap 3.3.1 so I could see ScrollTrigger, but not DrawSVG. 😕 I have installed again ./gsap-bonus.tgz but when I do that, I lost some of the plugin (I see DrawSVG but not ScrollTrigger). What do I do wrong ?? 

[GreenSock 15,606 Likes (Superhero)]

Hm, that doesn't make any sense to me. I just double-checked and the "Shockingly Green" gsap-bonus.tgz definitely has BOTH DrawSVGPlugin AND ScrollTrigger. It's very difficult for me to toubleshoot blind, but maybe try uninstalling (deleting) ALL of the GreenSock files in your project, including the ones in /node_modules/gsap and then download the latest zip from our site and very carefully follow the installation instructions from https://greensock.com/install related to the gsap-bonus.tgz file. 

[sybilrondeau 8 Likes (Newbie)]

I did like you said, I even tried it on a complety new project with nothing else installed. With yarn add ./gsap-bonus.tgz I had only part of the plugins installed. So I started fresh again and tried with npm install ./gsap-bonus.tgz. And it works !! That's so weird !