Using GSAP with npm

[PaulTheSwissGuy]

Hello people !

Today I wanted to try to use GSAP with a simple project, just an html file, using a 'npm install gsap'.
The installation works fine, a node_modules is created, but then I have trouble linking my JS and the GSAP library via ES6 modules.
 

import {gsap} from "./node_modules/gsap/gsap-core.js";

const title = document.querySelector("h1");

gsap.from(title, 0.4, { color: "red" });

It's not working and I have this message in the console :
"Invalid property color set to red Missing plugin? gsap.registerPlugin()".

Also I have a second question about using gsap with a simple project like that, how can I keep the gsap library for production when i'm finished ?
How can I remove the node_modules but keep the gsap library to make it work ?

Thank's so much if someone is passing by, I can't get my around since few hours! 




 

[ZachSaucier]

Hey Paul. You should be able to just import GSAP using 

import { gsap } from "gsap";

as the install documentation covers. Demo here.

 

1 hour ago, PaulTheSwissGuy said:

How can I remove the node_modules but keep the gsap library to make it work ?

You can't do that. The node_modules directory is necessary to build the project. Once you're done building your site you should make a production build of your project using whatever tooling you're using. That will create a JS bundle that includes GSAP and all of your code.

 

Also we recommend including the duration inside of the vars parameter so that you can use GSAP's defaults functionality.