Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sybilrondeau

I can't see ScrollTrigger in Node Modules

Recommended Posts

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 !

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Screen Shot 2020-06-04 at 20.17.50.png

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 ? 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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 ?? 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×