How to Isolate GSAP Instance and Prevent Global Exposures for GSAP Core and ScrollTrigger

[arl1nd]

I've been using GSAP (GreenSock Animation Platform) in my projects, particularly the GSAP core library and ScrollTrigger. However, I've noticed that even though I'm using ES6 imports like this:

 

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

The gsap and ScrollTrigger objects somehow still end up being exposed globally. I've gone through the documentation, but I couldn't find a clear solution on how to isolate these instances and prevent them from being disclosed in the global scope.

 

Is there any way to achieve the desired result of keeping my GSAP core and ScrollTrigger instances isolated and undisclosed in the global scope?

[arl1nd]

Nevermind, I found there were some other plugins exposing it and it was not the GSAP causing it.
 

[Rodrigo]

Hi,

 

As far as I can tell the gsap core object and ScrollTrigger should be available in the global scope of the file where the imports are present but not globally in the window object.

 

In this case:

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

console.log(gsap); // -> GSAP core object
console.log(window.gsap); // -> undefined

console.log(ScrollTrigger); // -> ScrollTrigger object
console.log(window.ScrollTrigger); // -> undefined

This is consistent with the way JS execution context works:

https://www.freecodecamp.org/news/execution-context-how-javascript-works-behind-the-scenes/

 

Another option would be to use dynamic imports in order to keep the objects out of the file's global scope:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import

 

If you keep having issues, please provide a minimal demo that clearly illustrates the issue.

 

Happy Tweening!

[Rodrigo]

1 minute ago, arl1nd said:

Nevermind, I found there were some other plugins exposing it and it was not the GSAP causing it.
 

Mhhh you mean other plugins are exposing GSAP and ScrollTrigger to the global window scope? Or those plugins are exposing something else that you confused with GSAP and ScrollTrigger?

[arl1nd]

Thank you @Rodrigo for your very good explanation.

 

I actually build WordPress themes and prefer to use GSAP in isolated mode to avoid conflicts with other plugins (had these issues in the past).

 

I was trying to access a globals window.gsap and window.ScrollTrigger which was very strange why they existed, but just then realized they were exposed from a plugin installed in the WordPress  and not the JS file I thought it was exposing them. It was my mistake.

 

Anyway, thank you for your input, really helpful stuff.

 

Best,

Arlind

[Rodrigo]

Hi Arlind,

 

Ok, so that plugin must be using either the CDN links or the regular files that can be downloaded that actually expose the core and plugins globally.

 

Mistery solved!! 🥳

 

Thanks for reporting back!

Happy Tweening!