EmilB94 Posted August 3, 2023 Share Posted August 3, 2023 Hello, I am relatively new to programming, and as a start I wanted to try to just get one of the demos on codepen () working on my local environment. I bought the ShockinglyGreen membership and installed + registered through NPM, and it seems to have correctly imported all plugins into node_module: However, I keep getting the following error, and the animations are not working correctly: I am importing the plugins using the official GSAP syntax: // Import the GSAP library and plugins using ES modules import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollSmoother } from "gsap/ScrollSmoother"; // Register Plugins gsap.registerPlugin(ScrollTrigger, ScrollSmoother); See the Pen JjmLLWZ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
EmilB94 Posted August 3, 2023 Author Share Posted August 3, 2023 Do I need to list each unique plugin as a dependency in the .json file? Cause as I understood it, I don't.. Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 3, 2023 Solution Share Posted August 3, 2023 Hi there! I can't see your whole sidebar there, but unless you're using some sort of framework/bundler, you may want to just use the minified files in script tags. If you can let me know more about your setup I can help! Link to comment Share on other sites More sharing options...
GreenSock Posted August 3, 2023 Share Posted August 3, 2023 Yeah, it's tough to diagnose from just a few screenshots like that - a minimal demo that clearly illustrates the issue is always best but I wonder if maybe you're trying to use GSAP inside a <script type="module"></script> tag (and not using some kind of bundler)? If so, browsers require that you use relative paths when you import, and use the file name like: import { gsap } from "./gsap/gsap.js"; import { ScrollTrigger } from "./gsap/ScrollTrigger.js"; import { ScrollSmoother } from "./gsap/ScrollSmoother.js"; But like Cassie said, if you're just trying to use the scripts directly in the browser like that (without any bundler), it'd be easier and more efficient to just load the files using standard <script> tags and no imports at all, like: <script src="gsap/gsap.min.js"></script> <script src="gsap/ScrollTrigger.min.js"></script> <script> // your code here... </script> (that assumes you put the files in a "gsap" folder that's in the same directory as the file this code is in) Link to comment Share on other sites More sharing options...
EmilB94 Posted August 4, 2023 Author Share Posted August 4, 2023 Thanks for the answers. It works flawlessly using Parcel now. Now the problem is actually getting stuff to do what I want, but that's a whole other topic 😄 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now