Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kursus

How to resume addPause()

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

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

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 by jamiejefferson
nevermind, the expert was already on the case
  • Like 2
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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() )

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
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.
×