Pulling GSAP Module and gsap.timeline failing on to animation Missing plugin? gsap.registerPlugin()

[DAGMAN]

Hey all,

 

We have a website which pulls in gsap the old way and generally works. But seeing as our future sites are going to be all module based I'm trying to pull gsap in and get it working but I seem to be getting the following error below.

 

import { gsap } from '../vendor/greensock/gsap-core.js';

/* ... */

console.log(gsap);
console.log(arrowBase);

// Animate In
tm = gsap.timeline();
tm.to(arrowBase, { duration: 0.25, top: 100, height: 50 });

 

Obviously there is more code but I get the following errors. I was wondering if it could be the CSSPlugin but on inspection of the documentation it states it is built into the core now.  I added the console logs so you can see the results of gsap and arrowBase.

 

 

The actual version of gsap-core.js is version 3.11.1

 

Is the above a classic miss-understanding with new people trying to use it. I've used it a few years ago but I'm back to newby again right now.  I'm not sure if I can make a code pen example unless you can emulate the exact setup of importing a module..? But I'm thinking what I've given is enough for somebody to notice the obvious and give it to me straight

 

I've found if I do the following it doesn't error but I really need to set a timeline var for this as it states in the documentation as well.

 

gsap.timeline(arrowBase, { duration: 0.25, top: 100, height: 50 });

 

Thank you in advance

 

Duncan

 

 

 

[Rodrigo]

Hi Duncan and welcome to the GreenSock forums!

 

I'm curious about the way you're importing GSAP into your project. You're not using npm or yarn for it? It seems that you downloaded the files from the GreenSock page and put them in the vendor folder of your project. I would recommend using that way following the instructions here:

https://greensock.com/docs/v3/Installation#esModules

Also there is an installation helper as well that can ease the process even more:
https://greensock.com/docs/v3/Installation#installer

 

Now if you want to keep using the approach of having everything in the vendor folder, you should find in the zip you can download two folders one called ESM (ES Modules) and another UMD (ES5 UMD files). You should try the files inside those folders and give it a whirl.

 

Finally if you keep having issues you can set up a modern build environment live sample in either Codesandbox or Stackblitz:

https://codesandbox.io/

https://stackblitz.com/

 

Happy Tweening!!!

[DAGMAN]

Hi Rodrigo

 

Thank you for the quick response!

 

So yeah, I downloaded the GSAP ZIP file and plucked the gsap-core.js file out of the esm folder. I then imported that script via another script

 

import { gsap } from '../vendor/greensock/gsap-core.js';

/* ... */

console.log(gsap);
console.log(arrowBase);

// Animate In
tm = gsap.timeline();
tm.to(arrowBase, { duration: 0.25, top: 100, height: 50 });

 

I console logged out stuff to show they were nodes and objects etc.  But no matter what I do it throws the error.  I figured could it be a CSS plugin thing but I read here https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#faq that it is part of gsap core and loaded automatically.

 

So all I have is below which is imported into my other module.

 

 

I've applied the most basic use of gsap timeline but I'm still getting the error

 

 

I've added a gsap basic test which replicates the same resultsgsap test.zip

 

 

Now just to say, after initially writing this question I managed to get the old way working by importing the cloudflare Tweenmax

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js

 

But that was globally and I wanted to do it the modular way. Also the way you suggested works but again I'm trying to figure out why the module way isn't working :-S

 

thank you again

 

 

[GreenSock]

When we say that the core includes CSSPlugin, we're talking about the gsap.min.js file that you'd load via a <script> tag as well as the file you'd get when you import from "gsap" in a module environment like this:

import gsap from "gsap";

You, however, appear to be trying to tap into the file in a very different way - directly via the gsap-core.js file in the src folder which is very different. For development, we separated out CSSPlugin from the core GSAP code and then stitch them together for the exports.

 

So the gsap-core.js file does NOT include CSSPlugin. 

 

This was also strategic so that if a savvy developer was using GSAP only to animate non-DOM stuff (like <canvas> objects), they could cut out some file size by only using the gsap-core.js source file. 

 

Is there a particular reason you're trying to access the gsap-core.js file directly instead of the esm/gsap.js file? I mean it's fine if you want to do that I guess - just make sure you also load (and register) CSSPlugin if you're doing anything with the DOM/CSS. 

[DAGMAN]

Hey Jack,

 

Nope it was merely not understanding it  

For now I'll load the minified and in the future I'll know to load the gsap.js file!

 

Brilliant thank you and also to Rodrigo for the input.

[Cassie]

14 hours ago, GreenSock said:

This was also strategic so that if a savvy developer was using GSAP only to animate non-DOM stuff (like <canvas> objects), they could cut out some file size by only using the gsap-core.js source file. 

Didn't know this! TIL