Jump to content


onComplete becomes onStart when reversed?

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

When you reverse a tween does the onComplete callback fire first or in the place of the onStart callback? or does it fire when when the reverse is complete?

Link to comment
Share on other sites



The onComplete callback fires when the tween is completed but not when the reverse starts. The onStart is when the animation begins going forward and onReveseComplete is when the animation has been completely reversed.


Take this scenario for example. You have an instance, once that instance is completed an onComplete callback is triggered. This callback executes a function and let's say a timer, once that timer is finished the tween is supposed to reverse from a specific position. What happens?, the onComplete callback gets fired, again, executing all that code again and after that timer is over the instance will be reversed from the specific position, again. Basically you're looping in the same portion of the instance for ever.


Also usually the reverse() method is invoked in a function or method, therefore any extra code you want to execute at that point can be included there as well:

var t = TweenLite.to(element, time, {vars});

function reverseTween()
  //other code here

Also in this post Jack goes into a good deal of detail on the reverse start issue:




I hope this clear things up.



Link to comment
Share on other sites

Yep, and it might help to visualize a virtual playhead as it moves across the tween - the onStart fires when the playhead moves from 0 to something more than 0, and onComplete fires when the playhead reaches the end of the tween. If you reverse() the tween, the playhead travels in the opposite direction, so neither the onComplete nor the onStart would fire in that case, but the onReverseComplete would fire when the playhead gets to the beginning of the tween. 


Does that clear things up? Hopefully the combination of Rodrigo's and my explanation sheds enough light on it :)

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