registerPlugin

[asoelist]

Hey Forum, I have a "back to basic" question. I haven't been paying attention to this detail while practicing gsap. Now I need to ask this question. 

 

According to gsap documents,  it is recommended to register plugins so that build tools don't drop them during tree shaking. 

 

I used gsap.min.js, ScrollTrigger.min.js, Draggable.min.js, and MotionPathPlugin.min.js.

 

So if I want to add one more library say CustomEase.min.js, I need to register this as well:

 

Is that all I have to do?

 

Thanks!

[Rodrigo]

Hi,

 

The loadScript method creates a script tag or adds those elements as modules so you can import them in other files? By using those CDN links my guess is that they are added as script tags.

 

When using CDN links on a script tag like this:

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

Normally there is no need to register the plugins.

 

Tree shaking works in build tools like webpack when the tools are installed using npm/yarn and imported using either ES Modules or UMD Modules.

 

Most definitely registering the plugins is not going to hurt or create any performance issue, but it might not be always necessary depending on the setup you have in your app.

 

Hopefully this helps.

Happy Tweening!

[asoelist]

Thanks for replying @Rodrigo,

Loading gsap libraries dynamically allows me to insert gsap when it's needed. Here is my loadScript: 

 

And like you said I appended (and the other 3 libraries)

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

into the document.head. 

 

But sometimes I got this error from google's developer's tools: 

 

The offending code is this:

 

Somehow if I don't register this "DrawSVGPlugin" , the program won't run. (other plugins are more "lenient"). But even though I register "DrawSVGPlugin", sometimes if gives the error "gsap is not defined". It complains but the program still runs.

 

(I don't use webpack because it's another learning curve for me. Although I use the Javascript module feature for code reuse. Somehow I find that webpack don't play nice with my web framework so I leave webpack for the next iteration).

 

Since I don't use webpack, I don't really have to deal with "tree shaking" issue and register is not compulsory? 

[GreenSock]

It's best to just always register the plugins. Let's not create confusion by saying it's optional. It'll only automatically register them if they're loaded into the global scope AFTER the main GSAP file has already loaded, and that's just a convenience that I'd rather not teach people to rely on. 

 

I assume you're getting that error because at the time you try to register one of the plugins, the gsap.min.js file hasn't loaded yet. You've got to make sure that loads FIRST because obviously you can't register a plugin with GSAP if GSAP doesn't even exist yet (hasn't loaded). 

 

Summary: don't register any plugins until GSAP exists (has fully loaded). If you're still having trouble, please provide a minimal demo that clearly illustrates the problem and we'd be happy to take a peek. 

 

Thanks for being a Club GreenSock member! 💚

[asoelist]

1 hour ago, GreenSock said:

 

 

I assume you're getting that error because at the time you try to register one of the plugins, the gsap.min.js file hasn't loaded yet. You've got to make sure that loads FIRST because obviously you can't register a plugin with GSAP if GSAP doesn't even exist yet (hasn't loaded). 

 

 

Perhaps this is the solution to make sure gsap.min.js is loaded first:

 

Thanks @GreenSock and @Rodrigo. It clears up my understanding of registerPlugin.