Centralized GSAP Plugin Registration in React/Next.js

[Toso]

Hi everyone,

Mostly I’m working on a projects using React/Nextjs or Astro or other Frameworks where I use GSAP across multiple components.

I want to know the "best practice" for registering plugins. 

1. Centralized Setup: Can i Create a single gsap-setup.js file where I import and call gsap.registerPlugin() for all the plugins I need. Then, I would import this file once in my root layout.js or App.js.

2. Per-Component Registration: Importing and registering the necessary plugins inside every individual component that uses them.

Specifically:

• Does the centralized approach cause any issues with tree-shaking or SSR in Next.js?

• Is there any performance penalty for registering all plugins at once at the root level?

• Should gsap.registerPlugin(useGSAP) also be handled in this global file?

So mostly I'm checking if its doable so i can use it in different frameworks or setups.

Thanks in advance!

See the Pen by (@) on CodePen.

[Rodrigo]

Hey @Toso!

 

On 3/1/2026 at 10:52 AM, Toso said:

Centralized Setup: Can i Create a single gsap-setup.js file where I import and call gsap.registerPlugin() for all the plugins I need. Then, I would import this file once in my root layout.js or App.js.

Absolutely, that should work without any issues and is a good approach for projects with that particular structure. In fact there are some Nuxt plugins that use that approach and take advantage of some Nuxt functionality that allows you to use a global Nuxt functionality and don't import anything, but that is something for Vue/Nuxt and a bit beyond the scope of this, but my point is to show that this plugin uses that particular approach:

https://github.com/hypernym-studio/nuxt-gsap

On 3/1/2026 at 10:52 AM, Toso said:

Per-Component Registration: Importing and registering the necessary plugins inside every individual component that uses them.

That shouldn't cause any issues whatsoever, is completely safe and doesn't hurt performance, even if it is redundant, that is if you register a Plugin more than once.

On 3/1/2026 at 10:52 AM, Toso said:

Does the centralized approach cause any issues with tree-shaking or SSR in Next.js?

It shouldn't, once the Plugin is registered it will be included in the bundle by the compiler. You'll still need to import the Plugins in every file you use them though, but I'm pretty sure you're aware of that.

On 3/1/2026 at 10:52 AM, Toso said:

Is there any performance penalty for registering all plugins at once at the root level?

Nope, as I mentioned before there shouldn't be any problems by registering the plugins one or more times.

On 3/1/2026 at 10:52 AM, Toso said:

Should gsap.registerPlugin(useGSAP) also be handled in this global file?

There is no real need to register the useGSAP hook anymore, that was a workaround when using the hook with the private repo. Since GSAP is 100% free now, that is not necessary anymore. Once again though, there is no issue in registering it though, so if you prefer that pattern then use it.

 

Hopefully this clear things up. Let us know if there's anything else we can help with.

Happy Tweening!

[Toso]

Thank you so much