Jump to content


Problem with pause()

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



I have a timeline, which is supposed to pause at certain points. From there I either want to go forward or backwards one step to the next pause-point by clicking on buttons. So in my timeline I put tl.call(pauseTL) at this points and the function pauseTL doesn't do anything else than tl.pause(). The problem now is, if I change direction of playback at this points I have to click twice in order for this to work.

So if I click the backbutton while timeline is paused and I have been going forward before it only works when I click for the second time.


Any ideas?

Thank you for your help.




Link to comment
Share on other sites

Hi and welcome to the forums.


I'm not sure if I follow correctly your issue, but what you could do is use the reverse() and play() methods with the forward and backwards buttons, like this:

var tl = new TimelineMax(),
    playButton = document.getElementByID("playButton"),
    reverseButton = document.getElementById("reverseButton");

    .to(element, time, {vars})
    .to(element, time, {vars})
    .to(element, time, {vars})
    .to(element, time, {vars})

playButton.onclick = function(){ tl.play() };
reverseButton.onclick = function(){ tl.reverse() };

function pauseTL()

Another option is doing the same but with labels, but that requires more code, because you have to create some conditional logic to check the next label of the Timeline (if you're going forward) or the previous (if you're going backwards).


Any way give that a try and let us know how it went.


Hope this helps,



Link to comment
Share on other sites

Hi and thank you for your answer.


What you are suggesting in your code is exacty what I did. But it is not working like I described. I still have to click on the button twice if I want to change direction, when timeline is paused.


So I tried something different and deleted the pause calls from the timeline and instead I created a button to pause. And somehow using this button does not create the problem the timeline works exactly as expected.


I just can't find out, what is going wrong.

Link to comment
Share on other sites

Ok, I got it.

When I play forward the pause call gets executed and then the timeline stops. So when I go backwards the first thing, that is found in the timeline is the pause call.

In order to fix this, I check in my pauseTL function the direction of the playback and which button is clicked, so that the pause  does not get executed on direction change.

  • Like 2
Link to comment
Share on other sites

Glad you figured out a workaround. It wasn't really a bug, but it's a logic issue because the playhead will likely land slightly past wherever your callback sits on the timeline, depending on when the requestAnimationFrame or setTimeout gets called and the performance of the system, etc. When it lands on or past the spot where the callback is, it of course calls it. Then, when you reverse(), it runs into that pause callback again (as you discovered). One solution would be to pass a parameter to your function that tells it the exact time that it's supposed to pause() at, as shown here:




So we just feed that time into the pause() method so that there's no gap between where the pause callback sits and where the virtual playhead sits. 


I hope that helps.

  • Like 1
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.