klyvoon Posted July 15, 2022 Share Posted July 15, 2022 Hi, I'm trying to use gsap but I can't properly import the gsap files ... Basically I just want to reproduce a fast simple example like there is in the gsap documentation "basic usage". I only got 3 files : Index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Website</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="main.js"></script> </head> <body> <div class="box orange"></div> </body> </html> style.css .box { display: block; } .orange { background-color: orange; width: 100px; height: 100px; } main.js import gsap from './gsap/dist/gsap'; gsap.to(".box", {duration: 2, x: 300}); I followed the installation tutorial with npm, still it doesn't, I don't know what i'm missing... My root folder is composed of main.js / index.html / style.css / node_module folder. I'll be gratefull for any help, thx ! Link to comment Share on other sites More sharing options...
SteveS Posted July 15, 2022 Share Posted July 15, 2022 What are you using to bundle? 1 Link to comment Share on other sites More sharing options...
klyvoon Posted July 15, 2022 Author Share Posted July 15, 2022 I just unzip the downloaded file and put it in the rootfolder then i type the NPM commands in visual studio code. Link to comment Share on other sites More sharing options...
SteveS Posted July 15, 2022 Share Posted July 15, 2022 That's not how you do that. Are you using Vite/Parcel? Or are you using raw HTML/CSS/JS? 1 Link to comment Share on other sites More sharing options...
klyvoon Posted July 15, 2022 Author Share Posted July 15, 2022 I'm using raw HTML/CSS/JS. Link to comment Share on other sites More sharing options...
Solution SteveS Posted July 15, 2022 Solution Share Posted July 15, 2022 Ok. You download the files and put them in your root directory then import them into your html the same way you are importing your main.js file. <script type="text/javascript" src="./gsap-shockingly-green/minified/gsap.min.js"></script> And then just use it in your JS. That being said I would highly recommend Vite when developing so that you get all the benefits of a bundler. 2 Link to comment Share on other sites More sharing options...
klyvoon Posted July 15, 2022 Author Share Posted July 15, 2022 I can't make it work, and dont find anything in the console that could give me a hint... edit : I got it ! it works ! thank you so much !! 2 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