Jump to content
GreenSock

creativetech

Two Versions of TweenMax on same page

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

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? 

 

Link to comment
Share on other sites

<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?

Link to comment
Share on other sites

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?
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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

 

:)

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.
×