Jump to content
Search Community

Have two "walled" instances of greensocks running in same project

macguffin 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

"Why in Gods's name would you want 2 instances running you fool" is your first response I'm sure, however.....


So I have a game and when the instructions come up I pause everything. I've tried all sorts of ways of pausing including export root and running through the global array list. However the most solid way I've found is to 


as this stops everything nicely, timelines, callbacks, events etc.


So great now I've paused everything but what if I need to use some tweens on the instruction page, kinda shot myself in the foot there haven't I.


So back to the original question can I have an independent second instance of TweenMax?

Could I use 

window.GreenSockGlobals = {};

to achieve this?


As always thanks in advance for any thoughts or suggestions.

Link to comment
Share on other sites

Hmm, this sounds like the perfect use case for TimelineLite.exportRoot() but you said you already looked into that - can you help me understand why that wouldn't work for you? Got a demo? I'd love to help. I just can't imagine there'd be a need for running two different copies of GSAP. I bet there's a better solution we could craft. I just need a little more context. And again, a reduced test case would be super duper helpful. 



  • Like 1
Link to comment
Share on other sites

I've always found that export root works a few times but then errors.

I use spine2d to make/layout my games and convert that into TweenMax timelines. This means that I can have a lot of timlines sitting dormant.


I can call export root once and it will work but the next time I need to pause I may have new tweens so I call export root again and it will freeze. I guess it's caught in some sort of recursive loop trying to add tweens to a timeline that have already been added.



Let me see if I can set up a codepen to try and help explain what I'm doing

  • Like 1
Link to comment
Share on other sites

ok back again. 


The pause stuff it right at the end of the js code, everything else is just setup stuff.


So I totally agree that exportroot would be the ideal solution.

However when I make an "export root" timeline create more tweens then do it again and again I run into a maximum call stack exceeded. I never really though this was unreasonable as I'm making more and more timelines.


So in this pen the bouncing things  represent my game. If I pause using export root (export_pause and export_unpause buttons) and unpause then during the game more tweens are created it will break. After 10 or so pauses the error occurs or the timelines stop being make correctly, or some things stop moving.


So what I normal do is set the TweenMax.globalTimeScale(0); (pause and unpause buttons). that way I know the error will never occur.


But what I want to do is have a separate version of TweenMax that can run an animation during the pause (like flashing a close info button) or be able to specify that my tween are on xGlobalTime and the animation during the pause is on yGlobalTime.


Hope I'm making some sense let me know if you're more confused than before I started. :)



See the Pen WEXRWP by macguffin (@macguffin) on CodePen




Link to comment
Share on other sites

Thanks for putting the demo together - super helpful.


I actually tweaked a few things in the exportRoot() method in the upcoming release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - are you able to reproduce the problem with that? I won't have time to look into this further until tonight or tomorrow, but I did poke around a little bit and when I was using the updated version, the only problem I was running into was that it seemed like your code was creating tweens of null targets (which isn't good ;)

Link to comment
Share on other sites


I've updated the pen with another way of solving the problem, manual_pause/manual_unpause

I'm setting the timescale of all the tweens to 0 using TweenMax.getAllTweens()


Does TweenMax.getAllTweens() capture everything including delayedCalls?

If it does it might be the easiest way pause everything current but still allow for new animation.



Link to comment
Share on other sites

ok further update (remembered why I didn't use this method)


The TweenMax.getAllTweens()  does work but TimelineMax animations return to the start rather than just stopping whereas the TweenMax animations stop and start fine.


Setting the globalTimescale stops everything and resumes it from the last position.


Is this expected? Anyway around it?





See the Pen wqPxdp by macguffin (@macguffin) on CodePen



Link to comment
Share on other sites

Yep, TweenMax.getAllTweens() includes delayedCalls (though you could loop through and exclude them if you want - just look for tweens whose target matches their vars.onComplete). 


And yeah, I think the null target tweens were from you :)


As for why the timelines are jumping when you set timeScale to 0, it's actually because you're setting the nested tween inside that timeline to have a timeScale of 0 and since TimelineLite/Max instances don't have smoothChildTiming enabled by default (for good reason), it makes that tween render at a very different position.


Think of it in terms of the playhead's position on a timeline - if you change the timeScale of a tween that starts at 0, for example, and it's 1 second into its animation but then you change its timeScale to 0.1, that means that where the playhead is positioned on the parent timeline, it'd line up with a time of 0.1 on that child tween (thus it'd jump). That's what smoothChildTiming solves - it's shove the startTime backwards on that child tween so that the playhead lines up. 


I know, it's probably a little mind-bending. But my point is that it's working exactly the way it's supposed to. 



Just filter out the nested tweens/timelines from your TweenMax.getAllTweens() array. There's no reason to alter the timeScale of nested stuff anyway since when you alter the parent timeline, it affects its playhead, thus all of the children. Here's some code you can just replace your TweenMax.getAllTweens() with: 


//just a quick way to grab the root timeline
var rootTimeline = TweenLite.to({}, 0.01, {}).timeline;
function getAnimations() {
    var a = TweenMax.getAllTweens(true),
        i = a.length;
    while (--i > -1) {
        //exclude anything that's nested
        if (a[i].timeline !== rootTimeline) {
            a.splice(i, 1);
    return a;


So now, when you call getAnimations(), you'll only get back stuff that's on the root. Make your edits to those and you should be golden.


However, I'm still concerned about the exportRoot() thing - can you explain to me how to reproduce the problem? Like exactly what do I click, how many times, in what sequence to get it to break? I'd REALLY like to make sure that works flawlessly. I wasn't able to get it to break in the updated version but I was probably just doing something wrong. 

  • Like 2
Link to comment
Share on other sites

Jack thanks very much for taking the time to explain this stuff and that snippet will be really useful. 


I will have a play with my stuff and your latest code with regards to the exportRoot. Let me double check I can break it and if I can I'll try and put something together that demos this. If I can break it reliably I'll start a new thread to discuss it.




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