Jump to content
Search Community

Avoid Multiple Loaded TweenMax and TweenLite

themepunch test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys,

 

is there any "best practice" to make sure that the latest loaded TweenMax Engine is used ? The Scenario is the following:  we producing plugins, and using your great GreenSock Engine.  Since we are not the only Plugin develpoers, and also many other usefull Plugin comes with GreenSock, we face to a problem.

 

All Plugin loads their own TweenMax version, sometimes TweenLite, etc.   We keep our version up to date, however if an other plugin loads their older TweenMax version, we got a conflict, or undefined function faliures.

 

Is there a proper way to avoid this ? !IMPORTANT! :  unfortunately  we have no influence on the way and the order of loaded plugins in page, we need to protect our own plugin and make sure that it just do not break).

 

Any great idea, help would be much appreciated here.

 

Cheers,

 

ThemePunch

Link to comment
Share on other sites

It certainly seems wasteful to load multiple copies of different versions on the same page, but I understand that you can't control that. Bummer. 

 

To answer your question, you could segregate your own version by defining a window.GreenSockGlobals object where everything will be attached. By default, things get added at the window/global level, but when GSAP loads, it looks to see if you have defined a GreenSockGlobals object and if it finds one, it'll attach everything there instead. For example:

<script>
     var gs = window.GreenSockGlobals = {}; //the newer version we're about to load could now be referenced in a "gs" object, like gs.TweenLite.to(...). Use whatever alias you want as long as it's unique, "gs" or "banner" or whatever.
</script>
<script src="js/greensock/v1.12.1/TweenMax.js"></script>
<script>
    window.GreenSockGlobals = window._gsQueue = null; //reset it back to null so that the next load of TweenMax affects the window and we can reference things directly like TweenLite.to(...)
</script>
<script src="js/greensock/v1.9.0/TweenMax.js"></script>
<script>
    gs.TweenLite.to(...); //would use v1.12.1
    TweenLite.to(...); //would use v1.9.0
</script>

Does that help?

  • Like 4
Link to comment
Share on other sites

Yep ! Exactly what i was looking for. Thanks a lot for your feedback, really appreciate it.

 

Unfortunately we dont have influence on what others do, and especially in WordPress the Chaos is big.

 

Cheers and have a great weekend,

 

ThemePunch

Link to comment
Share on other sites

One more question. Please take a look in this Fiddle:

 

http://jsfiddle.net/GRA89/

 

In case i load the New version first, and than the old version (2 subrelease downwards), both gets the new Engine loaded.  The problem,  is that not both Engine works than any more:

 

http://jsfiddle.net/GRA89/1/

 

Since i can be never sure, in which order the Engines are loaded, we have to find a solution for this (WordPress Authors and Plugin developers love build Jungle out there)

 

Hope you can help me here further ? 

 

Thanks again for all your help,

 

ThemePunch

Link to comment
Share on other sites

Now i found some other issue.

 

If i load i.e. splitText also, the window._gsQueue = null will make it unusable.  Since i dont want to share the splitText code here , i can not make an example of it, but something like this:

<script>
     var gs = window.GreenSockGlobals = {}; //the newer version we're about to load could now be referenced in a "gs" object, like gs.TweenLite.to(...). Use whatever alias you want as long as it's unique, "gs" or "banner" or whatever.
</script>
<script src="js/greensock/v1.12.1/TweenMax.js"></script>
<script src="js/greensock/v1.12.1/SplitText.js"></script>
<script>
    window.GreenSockGlobals = window._gsQueue = null; //reset it back to null so that the next load of TweenMax affects the window and we can reference things directly like TweenLite.to(...)
</script>
<script src="js/greensock/v1.9.0/TweenMax.js"></script>
<script>
    gs.TweenLite.to(...); //would use v1.12.1
    TweenLite.to(...); //would use v1.9.0
    SplitText(...)  // WOULD bring an Error: Uncaught ReferenceError: SplitText is not defined 
</script>

Sorry for bugging you with this, but i think once this figured out, many other Plugin developers could win of these informations.

 

Thanks a lot,

 

ThemePunch

Link to comment
Share on other sites

Hi, In such a scenario I would create a self-invoking anonymous function and pass TweenLite and SplitText as parameters

 

(function( TweenLite, SplitText, undefined ) {
  //here you can use SplitText
})(gs.TweenLite, gs.SplitText);
  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...