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

`Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".

`Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".

`Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".

`Uncaught TypeError: Failed to resolve module specifier "gsap". Relative references must start with either "/", "./", or "../".

jordiOP•3/12/24, 10:57 AM

jordiOP•3/12/24, 10:59 AM

When i remove type=module from the script tag i get this error...

Web Bae•3/12/24, 10:41 PM

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

Web Bae•3/12/24, 10:41 PM

Notice in my videos that I’m getting GSAP from the sky pack CDN

Web Bae•3/12/24, 10:42 PM

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

Web Bae•3/12/24, 10:42 PM

Your setup might be different but if you are following along the JavaScript lessons in Patreon this is most likely your error.

Web Bae•3/12/24, 10:43 PM

In your setup, The alternative is to remove the import statements from your index.js

Web Bae•3/12/24, 10:44 PM

Neither solution will likely really give you great Intellisense or autocomplete though!

Web Bae•3/12/24, 10:44 PM

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!

Web Bae•3/12/24, 10:45 PM

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•3/12/24, 10:46 PM

https://www.youtube.com/live/kXNsQ4gpMKs?si=mY9mKosGbu7AICLo

YouTubeWeb Bae

🔴 Exploring Better Webflow Workflows: TypeScript, p5.js, esbuild

Exploring better developer environments for Webflow with Typescript and bundler esbuild - p5.js example.

Web Bae•3/12/24, 10:46 PM

Did you go through the lesson in modules already?

jordiOP•3/13/24, 2:25 PM

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

jordiOP•3/13/24, 2:26 PM

I don't have github copilot and haven't tried typescript as well haha

Web Bae•3/13/24, 4:42 PM

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?

jordiOP•3/13/24, 5:39 PM

Nope haha, saw it on the gsap forum and decided to try it out

jordiOP•3/13/24, 5:39 PM

Saw it gave me some pretty new features

Web Bae•3/13/24, 5:53 PM

yes!

Web Bae•3/13/24, 5:56 PM

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_modulenode_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 gsapgsap 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!

jordiOP•3/13/24, 6:06 PM

Ahh got it, thanks man appreciate the explanation!