Jump to content
Search Community

How to reverse the animation at twice speed.

Xenex122 test
Moderator Tag

Recommended Posts

I want to reversed the animation but more faster than usual.

const tl = gsap.timeline() 

And let say we .add() some animation on it when a duration of atleast 1 or 2 but when I click the button to reverse it will make the duration to 0.5 or 1/2 when I'm reversing the animation. Anyone can help me through this?

See the Pen gOvZmMg by myth-vince (@myth-vince) on CodePen

Link to comment
Share on other sites

Sure, you could greatly simplify things: 

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

 

Your "anim" variable was IDENTICAL to your "tl" variable ( tl.add() returns itself for easy chaining), so it doesn't make sense to tl.add(anim...). That's like trying to put the timeline inside of itself :)

 

Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

You mean jump back to the start? Sure, that's easy:

tl.progress(0)

Or you can pause it there: 

tl.pause(0);

There are other options too, but I don't want to overwhelm you. I'd encourage you to read the docs. All animations have a bunch of control methods that let you do almost anything. 

  • 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.
×
×
  • Create New...