Two Versions of TweenMax on same page

[creativetech]

What is the best way to have two TweenMax/GSAP versions running on the same page? 

 

Is it possible to handle conflicts between two versions of TweenMax/GSAP loaded in the same page? Lets say there are two applications on the same page. The other applications is from a different developer and you have no idea if the other developer is using GSAP. What is the best way to make sure your code is using the version of TweenMax/GSAP that it was intended to use? 

 

[Carl]

Hi,

 

I think this post should give you what you need:

http://forums.greensock.com/topic/7074-jquery-wrapper-animate-stop/#entry26398

 

Let us know if you need more info

[creativetech]

<script type="text/javascript">
     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 type="text/javascript" src="js/greensock/v1.7/TweenMax.js"></script>
<script type="text/javascript">
    window.GreenSockGlobals = 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 type="text/javascript" src="js/greensock/v1.6/TweenMax.js"></script>
<script type="text/javascript">
    gs.TweenLite.to(...); //would use v1.7
    TweenLite.to(...); //would use v1.6
</script> 

Thanks. That post does help a lot. The solution that you provided (see above) will only work if you can control the order in which TweenMax\TweenLite loads. Do you have a way of solving the conflict if the version you want to use loads second and you don't want that version to replace the 1st version of TweenMax that the site uses?

 

Can you provide more information about 'window.GreenSockGlobals'? What happens if that property isn't null before my code is loaded in?

[GreenSock]

The GreenSockGlobals is just a holder object of sorts where the GreenSock classes will attach when they load. So this gives you a lot of control - as long as you set the GreenSockGlobals right before your stuff loads, that's where the classes will go, and then you can set it back to whatever it was previously if you want. Kinda like this [pseudo code]:

 

var oldGSG = window.GreenSockGlobals; //store temporarily 
var gs = window.GreenSockGlobals = {}; //this is where everything will attach
<script src="TweenMax.min.js"></script> //load
gs.TweenLite.to(...);
window.GreenSockGlobals = oldGSG; //restore to whatever it was previously

Does that answer your question?

[creativetech]

Yes-- That makes sense. Thanks for taking the time out to answer the question.

[crisu]

Hello,

 

This could be problematic in case you would use a CMS (like WordPress), actually you don't realy know the order scripts are being loaded, if it's loaded within head or at the end of body. The problem is that there can be two or more plugins that could use different versions of TweenMax.

[Jonathan]

Hello crisu,

 

Wordpress allows you to control and change the order of scripts with the WordPress wp_enqueue_script() method.

 

You can also change parameters of JS scripts by using or editing wp_enqueue_script() method, to tell WordPress to either insert the script in the head tag or in the footer. It also gives you an option to set the priority, so you can control the order of the scripts being loaded in WordPress. As well as adding a version number of the script. And wp_enqueue_script would be added to your functions.php

 <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?> 

:

You can also view the order of the scripts loaded, by viewing it in the browser developer toolbar... Profiler.

 

WordPress reference:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script