Jump to content
GreenSock

BradLee

translating using timelines

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

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

Link to comment
Share on other sites

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

 

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