Jump to content


reversed(true) behavior auto-playing?

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

This is not in the documentation. Either it's a bug or the docs need to be updated to be clearer.


When using `timeline.reversed(true)` if the timeline state is paused/finished it will resume it and reverse it.


While reading the docs I expected that code to behave as `timeline.reverse().pause()` rather than `timeline.reverse(0)`


See the demo Codepen to see what I'm talking about. Click on Reverse once the animation finished.

See the Pen qXarEa by tomasdev (@tomasdev) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums. 


Thanks for the demo. 


Perhaps its worth explaining that when your timeline is done playing it is not technically paused. The playhead just remains at the end position with nowhere to go. 


When you call reverse() or reversed(true) you get consistent behavior whether the timeline is currently playing, paused in the middle, or complete – the animation runs backwards. 



To to get the results you want try




hope that helps. If you need more info just let us know. 





  • Like 2
Link to comment
Share on other sites

Correct, I am using that already as workaround.


But think of the case


tl.to(".box", 1, {
    y: 100
}, 0.5).to(/*more stuff */).pause(); // or .paused(true)


Wouldn't you expect it to be paused if you do "tl.reversed(true)" ? in that case I'm setting a pause on last timeline action. Or am I approaching this incorrectly? Is there a way to specify when a timeline ends to stop reproducing other than hooking onComplete ?

Link to comment
Share on other sites

Thanks for the follow-up question. Another thing to point out is that adding .pause() to an end of an animation does not mean put the timeline into a paused() state when it is done playing.


tl.to(".box", 1, {
    y: 100
}, 0.5).to(/*more stuff */).pause();



This can be tested in your initial pen like so:


See the Pen MvjzNx?editors=0010 by GreenSock (@GreenSock) on CodePen


Notice how when you hit the run button nothing happens? That's because the paused state is being changed as the timeline is being created, not as it is being run.




Same thing would happen if you added timeScale(6) in the middle of a timeline


var tl = new TimelineLite();
tl.to(".box", 1, {y: 100})
  .to(".box", 1, {y:0})


the code above would not make the second tween play 6 times the normal speed. The entire timeline would play 6 times normal speed


See the Pen oezJgz?editors=0010 by GreenSock (@GreenSock) on CodePen


I think moving forward it is best to just remember that reverse() and reversed(true) will always put the playhead in motion and the animation will run backwards regardless of the paused state. If you want to reverse a timeline and not have any movement, just call pause() after it has been reversed.


I guess my follow-up question after all of this is. Why are you reversing your timeline if you don't want it to run backwards?





additional note.

If you want to add a pause in the middle of animation, like between 2 tweens, you can use  addPause() / Demo from tuts+


See the Pen LEwxoG?editors=0010 by tutsplus (@tutsplus) on CodePen





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