Jump to content


onUpdate no firing when reversed = true

Go to solution Solved by Carl,

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

So I've managed to use the timeline.staggerTo onUpdate callback just fine when the timeline goes forward, but when going in reverse, the onUpdate callback is never triggered. Please see attached codepen. The console only get triggered for when reversed = true.


Why wouldn't the onUpdate be triggered when going in reverse?


Thanks for any help :)

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

Link to comment
Share on other sites

I think you might be misunderstanding what "reversed" means. The timeline was never reversed - when it is "yoyo-ing", that doesn't mean the same thing as "reversed". Let's say you've got a timeline that repeats 2 times and yoyo's, visualized like this:




If each cycle is 1 second, notice this entire timeline would last 3 seconds (two repeats). 


The playhead moves across that entire timeline forward (even though internally it may act like its moving its local playhead backward during the yoyo). So its "totalTime()" is always increasing, although its "time()" Is going forward, then backward, then forward. If you "reverse" a timeline, its totalTime() will move backwards toward 0. 


So basically, "reversed()" is related to the direction of totalTime().

  • Like 1
Link to comment
Share on other sites

Thanks for the quick response!


Hmm ok, so reversed doesn't change. My problem though is that onUpdate is only being called in one direction and not the other (regardless of value of reversed). In the docs it says that onUpdate is called for every frame, but it seems to be only called when going one way. The console log appears only when the boxes shift to the right, and not when they shift to the left.

Link to comment
Share on other sites

  • Solution

It seems the problem is related to the fact that you are using tweens with no duration. 0-duration tweens are a logical nightmare as they do not have a beginning or an end. They complete the instant they start. Should a tween with no duration fire onStart, onUpdate and onComplete all at the same time? If you play a 4 second long timeline forward  to completion that has a 0-duration tween  in the middle and then you call pause(2) (right were that 0-duration tween is) should we render the start state or the end state? These are the questions we wrestle with constantly. 


We will see if this is something that needs fixing, but in the meantime you can just use a very very very short duration like 0.0001 and get the results you want.



  • Like 5
Link to comment
Share on other sites

The short duration time works, so I'll go with that for now!

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.