Webflow, VS Code & GSAP
Hi all, i'm trying to import GSAP in my vscode to get autocompletion etc. but when i'm using the liveserver to push this to webflow, it gives me this error
12 Replies
When i remove type=module from the script tag i get this error...
@jordi the way you are importing GSAP expects it to be installed with npm, and bundled using a bundler, which we haven’t gotten to yet in the JS course.
Notice in my videos that I’m getting GSAP from the sky pack CDN
Try importing like this
https://www.skypack.dev/view/gsap
npm:gsap | Skypack
GSAP is a robust JavaScript toolset that turns developers into animation superheroes. Build high-performance animations that work in every major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...any
Your setup might be different but if you are following along the JavaScript lessons in Patreon this is most likely your error.
In your setup, The alternative is to remove the import statements from your index.js
Neither solution will likely really give you great Intellisense or autocomplete though!
You might get some though. Do you have GitHub copilot? Have you explored npm and/or typescript yet? I’m planning to go over npm in an upcoming module soon!
Here’s a video on a more complicated dev setup with typescript that gives full type safety. I use p5 and not GSAP in this one.
Web Bae
YouTube
🔴 Exploring Better Webflow Workflows: TypeScript, p5.js, esbuild
Exploring better developer environments for Webflow with Typescript and bundler esbuild - p5.js example.
Did you go through the lesson in modules already?
Awh man, nope haven't gotten through the modules yet. Currently trying to wrap my head around the first three lessons and trying to understand everything haha, Javascript is quite complex
I don't have github copilot and haven't tried typescript as well haha
OK no problem! You are jumping ahead a little bit here then 🙂
did chatGPT give you the import statements? where did you pull that from?
Nope haha, saw it on the gsap forum and decided to try it out
Saw it gave me some pretty new features
yes!
the person in that post is most likely using npm, which allows import statements like that. It's a little confusing because javascript has native import syntax. The crux here is where the gsap code actually lives :).
When you use npm, a folder called
node_module will be created in your project directory, which has all of the gsap code. npm is "smart" and knows that the import reference to gsap is inside node_modules. VS Code sees this and says "oh I know some things about gsap let me provide some autocomplete suggestions"
Without npm, your index.js is looking directly at the project directory for a file called 'gsap' which of course doesn't exist. If you watch the lesson on modules in Patreon, I show you how import/export works in vanilla JS projects (without NPM).
Hope that helps!Ahh got it, thanks man appreciate the explanation!