pause and resume all tweens with game state

[Rob]

Hi, I've previously used pauseAll and resumeAll when entering a pause state of a game to halt animation.

With the GSAP JS pauseAll works fine, but resumeAll doesn't resume any of the animations that we're paused, I notice the docs suggest both methods are deprecated.

 

Are there any other suggested solutions short of manually resuming all tweens individually?

 

Thanks

Rob

[Carl]

Hmm, not sure why resumeAll() isn't working. A little basic test here shows no problems:

http://codepen.io/GreenSock/pen/47be5518407b568b7dafc83a3cec2144

 

Feel free to fork that to replicate your issue.

 

Also, as mentioned in the resumeAll documentation, TimelineLite's exportRoot() is the preferred method of controlling all tweens, delayCalls and timelines in your file.

 

It is explained here with steps to see it in action:

http://forums.greensock.com/topic/7397-tweenlite-update-function-for-a-game/#entry27837

 

Let us know if we can be of more help.

[Rob]

Hey Carl,

Thanks for your reply.

 

Here's an example with strange resumeAll() behaviour, it seems that it's because im using a timeline.

http://cdpn.io/ldsfa

 

I will have a look at moving to using exportRoot()

[Carl]

Thanks for providing the pen, very helpful. 

 

Before getting to your issue, I want to point out that you're first tween never animated because your fromTo() tween has immediateRender set to true which means that the from values are rendered immediately.

 

Since your second tween had a starting from value of left:-140 and the first tween had an ending value of left:-140 it meant that the first tween basically started where it ended. This isn't a bug, its how the system was designed.

 

For more detail, suppose you wanted to start with a blank screen and create a sequence that fades in 3 items. Simple:

TweenLite.from(element1, 1, {opacity:0});
TweenLite.from(element2, 1, {opacity:0}, delay:1);
TweenLite.from(element3, 1, {opacity:0}, delay:2);

If immediate render was set to false (the starting values wouldn't be set until the tween was scheduled to run) the second element would appear for 1 second fully visible, jump to an opacity:0 (starting value) and then tween to opacity:1 (value at the time tween was created)

 

Likewise element3 would be visible for 2 seconds, jump to opacity:0 and then tween to opacity:1.

 

Its pretty clear this is not what most users would want. Thus the decision to set immediateRender:false for all from-based tweens: from(), fromTo(), staggerFrom() and staggerFromTo().

 

So for you to see your first tween run simply do this on your fromTo tween:

 

tl.add(TweenMax.fromTo("#score", .5, {left:-140},{left:400, immediateRender:false}));

 

 

----

 

 

In addition I want to note that you could use a much shorter syntax using the TimelineLite convenience methods to() and fromTo(). You only need add() when adding TweenMax tweens, timelines, labels or delayed calls. Since your tweens don't use any features specific to TweenMax, you can just do this:

 

Lot less code. Check out to() in the docs:

 

---

 

Back to your issue

I think you may have uncovered an issue with pauseAll() / resumeAll() that we have to look into further. 

 

Sorry for the inconvenience.

 

-c

[Carl]

that "much less" code should have looked like this:

 

var tl = new TimelineMax()
tl.to("#score", .5, {left:-140})
  .fromTo("#score", .5, {left:-140},{left:400})
  .to("#score", .5, {left:-140}, "+=1"); //use position parameter instead of delay

[GreenSock]

This exposed an issue in TweenMax.pauseAll() and resumeAll() where the default "timeline" parameter was false instead of true, so basically that means when you called pauseAll() it did NOT pause any timelines. The docs indicate the default "timelines" value is "true", but the JavaScript flavor didn't actually have that implemented. Sorry about that. We'll get that patched in the next release, but in the mean time you can just pass those parameters in specifically. So...

//pause everything including tweens, delayedCalls, and timelines
TweenMax.pauseAll(true, true, true); 

//resume everything including tweens, delayedCalls, and timelines
TweenMax.resumeAll(true, true, true);

Again, my apologies for that default mix-up.