reversed(true) behavior auto-playing?

[tomasdev 0 Likes (Newbie)]

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

[Carl 9,719 Likes (Superhero)]

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

 

tl.reversed(true).pause();

 

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

 

 

 

 

[tomasdev 0 Likes (Newbie)]

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 ?

[Carl 9,719 Likes (Superhero)]

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})
  .timeScale(6)
  .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