reverse again?

[erikb]

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

[Rodrigo]

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.

[erikb]

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.

[Rodrigo]

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.