Plugin registration issue in module when a global GSAP instance is already loaded

May 20, 2025

Hello,

Some context about this issue

We have a customer website that uses gsap globally and loads it in its vendors.js. It's in version 3.11.
On this website, we inject a Vue app that bundles gsap.
We use vite to bundle the app, and use latest gsap, aswell as ScrollTrigger plugin as module imports.

Problem is: ScrollTrigger plugins registers itself to the global instance when importing the plugin, and does not register on our bundled instance when we trigger registerPlugin.

Issue reproduction (from the vue + scrolltrigger example): https://stackblitz.com/edit/vitejs-vite-cywcj9dz?file=index.html
Only addition here is a <script> tag loading another instance of gsap globally.

Looking at the source code, the last line of ScrollTrigger plugin does the auto-registration and seems to be the issue. There is no way to disable it (as I'm aware of)

We cannot use the customer version as it creates a dependency between our code and his, the website and the app do not have the same lifecycle.

Is there a way to handle this ?
Could it be possible to add a flag to disable auto-registration of the plugin ?
Is it really possible to have multiple instances of gsap on a single webpage ?

Thanks in advance

May 20, 2025

Hi @Choub and welcome to the GSAP Forums!

This is an odd situation indeed. Maybe you can try the approaches in these threads:

I'm not aware of another way to tackle this, perhaps there is one, but is eluding me right now 🤷‍♂️

Hopefully the information and approaches in those threads help

Happy Tweening!

May 20, 2025

In case it helps - GreenSockGlobals:

See the Pen zxxVPyd?editors=1010 by GreenSock (@GreenSock) on CodePen.

May 21, 2025

Unfortunately this approach do not work in case the second gsap is imported using an ES6 module. GreenSockGlobals is not populated when gsap is imported inside an ES6 module.

I updated the stackblitz code to better show the issue using GreenSockGlobals object: https://stackblitz.com/edit/vitejs-vite-cywcj9dz?file=index.html

<head>
    <script>
      const pageGSAP = (window.GreenSockGlobals = {});
    </script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const componentGSAP = (window.GreenSockGlobals = {});
    </script>
    <script type="module" src="/src/main.js"></script>
    <script>
      setTimeout(() => {
        console.log(
          'page',
          pageGSAP.gsap?.version,
          pageGSAP.ScrollTrigger?.version
        );
        console.log(
          'component',
          componentGSAP.gsap?.version,
          componentGSAP.ScrollTrigger?.version
        );
      }, 1000);
    </script>
  </body>

But the console.log outputs this:

page 3.11.2 3.13.0
component undefined

Here we clearly see that the 3.13 ScrollTrigger plugin in installed on the global 3.11 gsap version, while the plugin registration is done inside the ES6 module using the imported 3.13 gsap version.
If we output the versions after registering the plugin inside the module, we get this:

module 3.13.0 3.13.0

This shows the correct versions are imported inside the module, but the registration is done on the global instance.

I cannot find a way to fix this, apart from modifying the ScrollTrigger auto-registration source.

Maybe should I file an issue on github, because this seems like a bug, considering how gsap is more and more used as an imported ES6 module ?

Regards

Notifications

Messages

Plugin registration issue in module when a global GSAP instance is already loaded

Recommended Posts

Choub

Rodrigo

GreenSock

Choub

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members