Jump to content
Search Community

Using onReverseComplete to restart timeline

xolau test
Moderator Tag

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

Hello,

 

I am having troubles to understand and get this functionality right.

 

As default, I have created two Timelines, one Master and other is child, Slave.

 

Slave Timeline is tweening progress of the Master Timeline (as I want to have exact same movement in this short animation) and once the Master timeline is requested to play, Slave timeline is paused so it doesn't mess up the actuall animation progress.

 

This "Master play" is attached on the button, where mouse enter play the Master animation, and mouse leave reverse it.

 

Now the tricky part is I am using "onReverseComplete" callback in the Master timeline, to set progress of the Slave, and play it again.

 

As you can see in the attached demo, everything behaves as expected, except on the mouse leave "reverse" the Slave timeline doesn't contain anymore "repeatDelay" property (visually) and is looping like it was never set.

 

I did try numerous approaches, but non of them was working, every time the repeatDelay has been removed, and I can't understand what is happening.

 

Anyone any idea how to make this work, while preserving the logic? (Tweening progress of the one timeline within other)

 

Thanks a lot!

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

Link to comment
Share on other sites

That's just because you forgot to pause() the master timeline. So it is trying to play (and move its own playhead) at the same time as the slave is trying to control that same playhead. They're fighting over it. As soon as the slave takes a break (during its repeatDelay), the master is moving its own playhead (in reverse, of course, because that's the direction you had set it). 

 

Make sense? 

 

So just add master.pause() inside your onReverseComplete and you should be fine. 

  • Like 4
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...