How to use GSAP in NPM

[Osh]

I am newbie here🙈

So I want to try by using npm instead CDN Gsap. I started to install from windows terminal npm install gsap i  ,

 

After installing I tried to go index.html, removed from script 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>

then refresh in index.html and it doesn't work! It doesn't animate!

However it works perfect if I call back script in CDN! 

 

Maybe I have to call  npm run gsap? 

Or do I need to install web server?

See the Pen poPZOJq by RQOrch (@RQOrch) on CodePen

[OSUblake]

To run native modules in the browser, the script tag has to have a module type on it.

 

<script type="module">
  import { gsap } from "./node_modules/gsap/index.js";

  gsap.to(".foo", { x: 200 });
</script>

 

But I don't want to confuse you with that, because basically nobody does it that way because they use some sort of build tool. I would recommend using snowpack or parcel to get started. With those, you don't have to worry about the script tag, and you can import GSAP using the node style import shown on our installation page.

 

import { gsap } from "gsap";

gsap.to(".foo", { x: 200 });

 

If you want to use imports with a CDN, check out skypack. It will even work with CodePen.

 

See the Pen yLbqRBN by GreenSock (@GreenSock) on CodePen

 

A note about skypack, if you go visit the imported url, like https://cdn.skypack.dev/gsap, it will show you urls to use for production, which will be minified.

 

 

/*
 * Skypack CDN - gsap@3.7.1
 *
 * Learn more:
 *   📙 Package Documentation: https://www.skypack.dev/view/gsap
 *   📘 Skypack Documentation: https://www.skypack.dev/docs
 *
 * Pinned URL: (Optimized for Production)
 *   ▶️ Normal: https://cdn.skypack.dev/pin/gsap@v3.7.1-oqmeGbnx72naX9MRGwFV/mode=imports/optimized/gsap.js
 *   ⏩ Minified: https://cdn.skypack.dev/pin/gsap@v3.7.1-oqmeGbnx72naX9MRGwFV/mode=imports,min/optimized/gsap.js
 *
 */

 

[Osh]

Thank you so much. 

It took me actually 3hrs to figure it out those two recommendations; snowflakes and parcel.

 

I have tried to install snowflake - that was too complex! It returned some 404 error. 

 

The parcel isthe best! It was not scary to fallow and install it.

 

So thank you so much!!

Finally no CDN!

 

To GSAP-infinity .. and beyond! 🦸‍♂️🧦

[CraigO]

I have followed the solution given above by OSUblake to use imports as a CDN within my <script type="module">

 

I also added the required registration of gsap.registerPlugin(ScrollTrigger);  

 

But console error still states that ScrollTrigger is not undefined. I did not find any reference on skypack.dev on how to also import ScrollTrigger plugin. 

 

Does the cdn import from skypack.dev for GSAP also include the ScrollTrigger plugin or is it a separate import? 

 

 

[GreenSock]

ScrollTrigger is a plugin - it's not part of the core GSAP file. Have you tried this?:

import { ScrollTrigger } from "https://cdn.skypack.dev/gsap/ScrollTrigger";