ScotchRoo Posted August 6, 2021 Share Posted August 6, 2021 Hi, My codeworks fine when I use the CDN and a <script> JS code </script> tags like this <!DOCTYPE html> <html> <head> <meta charset='UTF-8'/> <title>welcome</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./static/style.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> </head> <body> blah...blah...blah... </body> <script> my JS code and Greensock code </script> </html> The problem I have is when I try to put that script into a single separate file so many pages can use it. How do I go about importing GSAP? I can't use "npm install gsap" on my webhost so I have access to the gsap.min.js file instead. Html page: ... </body> <script type="module" src="./static/app.js"></script> </html> Scripts page: import { gsap } from "http://mywebsite.com/static/gsap.min.js"; ... const timeL1 = new TimelineLite(); timeL1.fromTo(object1, {x: 0, opacity: 0}, {x: 0, opacity: 1, duration: 0.5}); timeL1.fromTo(object2, {x: "+=30", opacity:0}, {x: 0, opacity:1, duration: 1}); ... No idea how to link the scripts file to the gsap.min.js file.... When I try I get all sorts of errors. Some say there's no "default" in the gsap.min.js file Others say "Cannot set property window of #<Window> which has only a getter" Any help appreciated! Thanks, Andy Link to comment Share on other sites More sharing options...
nico fonseca Posted August 6, 2021 Share Posted August 6, 2021 Hi @ScotchRoo, You can see on the installation page if any method works for what you need. If you can't find the solution let me know.https://greensock.com/docs/v3/Installation And if you use gsap v3 you don't use this const timeL1 = new TimelineLite(); use: const timeL1 = gsap.timeline(); 3 Link to comment Share on other sites More sharing options...
OSUblake Posted August 6, 2021 Share Posted August 6, 2021 4 hours ago, ScotchRoo said: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> You definitely don't need that. 4 hours ago, ScotchRoo said: import { gsap } from "http://mywebsite.com/static/gsap.min.js"; Before you go using imports, it's very import to understand how they work. Build tools have really muddied the waters about how to use imports natively. Please see this post. There are only certain files that can be imported natively, and the .min.js files aren't valid. 4 hours ago, ScotchRoo said: const timeL1 = new TimelineLite(); As @nicofonseca pointed out, this syntax is deprecated. Please see our Migration Guide. 2 Link to comment Share on other sites More sharing options...
ScotchRoo Posted August 6, 2021 Author Share Posted August 6, 2021 I have tried both suggestions, the error I get is: "Uncaught SyntaxError: The requested module 'http://myurl.com/static/main/gsap.min.js' does not provide an export named 'gsap' " HTML script tag: <script type="module" src="/static/main/app.js"></script> My script looks like: import { gsap } from "http://myurl.com/static/main/gsap.min.js"; ... const timeL1 = new gsap.timeline(); timeL1.fromTo(object1, {x: 0, opacity: 0}, {x: 0, opacity: 1, duration: 0.5}); timeL1.fromTo(object2, {x: "+=30", opacity:0}, {x: 0, opacity:1, duration: 1}); Link to comment Share on other sites More sharing options...
GreenSock Posted August 7, 2021 Share Posted August 7, 2021 It sounds like you're trying to import the standard ES5 minified file instead of the ES Module. In your download zip, the ES Module files are in the "esm" folder. It's relatively uncommon to do it the way you seem to be doing it, though - most people either use a build tool/bundler -OR- they use a regular <script> tag (not type="module") and load the ES5 file the way you're doing it. That makes gsap a global anyway, so you could just remove your gsap import statement altogether in that case. It's pretty tough to diagnose blind, though. You'll have a much better chance of getting a solid answer if you provide a minimal demo so we can see exactly what's going on. Link to comment Share on other sites More sharing options...
OSUblake Posted August 7, 2021 Share Posted August 7, 2021 2 hours ago, ScotchRoo said: I have tried both suggestions, the error I get is: Did you read the post I linked to? It shows the correct file to import, but I also suggest not doing that. As Jack said, you should use a build tool for imports, Parcel is good one. Or do not use imports. A script tag is super easy and requires nothing to setup. 1 Link to comment Share on other sites More sharing options...
ScotchRoo Posted August 7, 2021 Author Share Posted August 7, 2021 Ahhh I see what you're getting at OSUBlake! Thanks for the tip I'll read up on them. I'm fairly new to javascript do I didn't know about the history of importing modules into a stand alone file. I'll look into: Parcel (parceljs.org) and JavaScript modules - JavaScript | MDN (mozilla.org) 3 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