Jump to content
GreenSock

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

reversed(true) behavior auto-playing?

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

 

tl.reversed(true).pause();

 

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

 

 

 

 

  • Like 2
Link to post
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 post
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})
  .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

 

 

 

 

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

×