Jump to content
GreenSock

erikb

reverse again?

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

In this shabby codepen of an example, I can click the button to reverse my animation once.

 

Subsequent clicks have no effect.

 

How do I allow for more reversals while the tween is animating?

 

See the Pen pBory by anon (@anon) on CodePen

Link to comment
Share on other sites

Hey Erik,

 

If you're looking for some sort of toggle functionality you could use this code:

$("button").click( function() {
  tl.reversed() ? tl.play() : tl.reverse();
});

That basically checks the instance's reversed state (returns a boolean), if is true plays the tween/timeline if is false reverses it.

 

You can check about this conditional operator here:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

 

Now if you want to reverse the timeline from the end this you can use reverse(-0). That basically sets the instance's(twenn/timeline) progress to 1 and then reverses it:

$("button").click( function() {
  tl.reverse(-0);
});

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Thank you,

tl.reversed() ? tl.play() : tl.reverse();

is what I needed.  I assumed calling reverse would reverse whichever direction the playhead was currently moving.  I think this is a valid assumption, but now I understand the library better.

Link to comment
Share on other sites

Hi Erik,
 
You're welcome.
 
In terms of how the reversed() method works, basically as soon as the playhead moves forward it returns false and when the playhead is going backwards it returns true. This code snippet is very useful to toggle the direction of an instance, whether while is playing or has finished independently of the direction.
 
Be aware, though, that if you create a paused instance it reversed state is false, so it won't play at the first button click. For that you have to use reversed() as a setter:

var tl = new TimelineLite({paused}),
    button = document.getElementById("toggleBtn");

tl
  .to(element1, time1, {vars})
  .to(element2, time2, {vars})
  .reversed(true);

toggleBtn.onclick = function()
{
  tl.reversed() ? tl.play() : tl.reverse();
}

Like that the instance will play when the code is executed the first time.

 

Rodrigo.

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