translating using timelines

[BradLee 5 Likes (Newbie)]

Trying to use 2 timelines to translate an object (this is an abstraction from a much larger code base). I don't understand why the object won't move back and forward.

See the Pen QvejNj by BradLee (@BradLee) on CodePen

[Carl 9,066 Likes (Superhero)]

Thanks, for the demo. I only see 1 timeline but you said there were 2. 

 

In your demo the div will move back and forth but you need to click twice.

You start your animation paused at the beginning and the trans value is false.

Since trans is false the first click tries to reverse the timeline. The playhead is paused at time(0) so reversing from there doesn't do anything.

If you are old enough you can try to imagine a VHS tape that you opened fresh out of the box, put into your vcr and then tried to rewind... nothing would happen because you are at the beginning.

 

On the first click you set trans back to true so that on the second click the timeline plays as expected.

 

To fix your demo you could update your code to use:

enterAnimation
      .to(myDiv, 1, { x: '100%' })
      .pause().reverse();
var trans = true;

 

However there is a cleaner approach.

You can get rid of the trans variable altogether as the timeline has a reversed() method that allows you to set and get the reversed state (true or false) of the timeline. If you create the timeline in a reversed state, you can un-reverse the timeline on each click like so:

 

enterAnimation.reversed(!enterAnimation.reversed())

 

See the Pen GEgMrq by GreenSock (@GreenSock) on CodePen

 

The same technique is applied in this tutorial about toggling the paused() stated of an animation: 

 

https://greensock.com/playpause