How to resume addPause()

[kursus]

Hi all,

 

I have a timeline controlling several tweens. I can pause and resume it with no problem.

 

However when I call the addPause(X) method, X being a number, I can't resume or play the timeline anymore after that.

 

Thanks for your help

 

 

[jamiejefferson]

The logic for addPause should be fine doing something like this:

var tl = new TimelineLite();

tl.to(target, 1, { color: 'blue' })
  .addPause(2)
  .to(target, 1, { color: 'red' });

// wait 2+ seconds, tl will pause at 2 seconds in
// target will be blue

tl.resume();
// tl will resume playing - target will tween to red

Using addPause won't affect the ability to pause and resume a timeline at your own request. If you are experiencing something different, could you provide a small sample that shows the issue (codepen or jsfiddle would be great) so we can help you further.

[kursus]

Hi Jamie,

 

Thanks for your answer.

 

Here is a fiddle demonstrating the issue :

http://jsfiddle.net/LBDAB/10/

 

Thanks for your help.

[Carl]

You should just use pause() in this case

 

$( ".pause" ).on( "click", function() {
 tl.pause(3)
});


$( ".resume" ).on( "click", function() {
 tl.resume();
});

addPause() is a convenience method to add a stop-point into your timeline as the timeline is being created, most often used so that a timeline will stop playing on its own, without user interaction. 

[kursus]

Trouble with the pause() method is that the animation jumps straight to the point.

 

I need to define in advance the point where the animation is going to stop, but I don't want any jump in the animation.

 

Do I have any solution ? Labels maybe, even though it is much less flexible (restricted to tweens callbacks).

[GreenSock]

Ah yes, thanks for pointing that out. It's a much trickier scenario than it may seem like. I'll spare you the lengthy explanation, but I believe I have identified the issue and fixed it. See the attached preview of 1.11.3. Does that work well for you? I apologize for the confusion there. 

GSAP_1.11.3_preview2.zip

[jamiejefferson]

Actually, it looks like there might be a possible issue with the addPause() method http://jsfiddle.net/M2Sj5/1/

 

Looks like it can't just be resumed at the pause point anymore (collides with the callback each time).

 

In the mean time, you could just get the resume working again by adding a tiny jump forward to the resume http://jsfiddle.net/M2Sj5/2/

tl.resume(tl.time() + 0.00001);

Edited December 10, 2013 by jamiejefferson
nevermind, the expert was already on the case

[kursus]

Well thank you guys !

 

@Greensock indeed the 1.11.3 preview fixes the issue. That's awesome. Can't wait to see the changelog !!

 

@ Jamie that works perfectly, thanks !

 

 

edit: I don't know if it is an expected behavior, but when your animation loops the pause will repeat each time, even if you have called resume(). Is there a way to simulate removePause() ?

 

I'm stunned by the reactivity here on the forum, the precision and the politeness of the answers. Many thanks for all of this !!

[jamiejefferson]

Yes that is expected; addPause() is just like adding a tween into the timeline - it will exist on all repeats. There's not really an easy way to grab a reference to the pause callback - you would need to getChildren() and parse through for a zero duration tween at that insert point - it can get a little messy.

 

I was just in the middle of tidying up something I thought you might be coming back for though

$( ".pause" ).on( "click", function() {
  tl.paused(true);
  
  var currentTime = tl.time();
  // gets the time local to this repeat (i.e. it is less than tl.duration())
  
  var pauseTime = 3; // time to pause at
  pauseTime = pauseTime + (currentTime > pauseTime ? tl.duration() : 0);
  // adjust the pause time to handle an overshoot (prevents it going backwards)
  
  var duration = pauseTime - currentTime;
  // duration to maintain the same speed of the timeline
  
  TweenLite.fromTo(tl, duration, { totalTime: currentTime }, { totalTime: pauseTime, ease: Linear.easeNone });
  // tween totalTime so that it can go beyond a repeat
});

http://jsfiddle.net/LBDAB/11/ ( seems like I left that tiny jump in there, but you would only need to call tl.resume() )

[kursus]

Thanks Jamie I finally solved this by clearing my timeline on each turn. Really impressed by support quality here