Jump to content
Search Community

GSAP timeline and high timeScale

angelgbg test
Moderator Tag

Recommended Posts

Hello, I've noticed something strange when having a tween in a timeline with a high timeScale.
I've noticed that the `onUpdate` callback of the timeline is called after the `call` method (hope this make sense). Please have a look at the logs in the console.
Is this an expected behavior? I was expecting the `onUpdate` to be called before anything else (in my case the `call` method).

 

If I attach the `onUpdate` callback on the `tween` object itself then everything works as expected and `onUpdate` is called before the `call` method.

 

Has anyone encountered this?

See the Pen abvdpjx by angelgbg (@angelgbg) on CodePen

Link to comment
Share on other sites

Hey angelbgb.

 

With your duration so small and a timeScale so high, you effectively have a tween with a duration of 0.16s / 40 = 0.004 seconds. That means that the call will be fired at that point, around 0.004 seconds after the start. If the next requestAnimationFrame hasn't fired yet (usually raf fires 60 times per second, or every 0.0166666667 seconds) then that call function will fire before the onUpdate because onUpdate is fired when the tween updates every animation frame. 

 

Does that make sense?

Link to comment
Share on other sites

Hi Zach, thank you for you response. I think it makes sense. But what about my other question? If I attach the onUpdate callback on the tween object itself (not on the timeline), then every time the `onUpdate` is called before the `call` method. Should this not follow the logic you've explained as well? Is there something to do with which object I attach the onUpdate callback to?

See the Pen ZEbQKBO by angelgbg (@angelgbg) on CodePen

Link to comment
Share on other sites

This is expected behavior. An onUpdate runs after the animation updates (finishes rendering its children/properties). So in your example, the timeline updates its playhead, renders all its children (and a call() is just a zero-duration tween with an onComplete), and then fires its onUpdate. 

 

Make sense? 

  • Like 2
Link to comment
Share on other sites

In other words, the order in which they occur is tween1's onUpdate (which is effectively an onComplete since the duration is so short), tween2's (in this case the .call()) onComplete, the timeline's onUpdate (which is again effectively an onComplete since the children tween's durations are so short).

Link to comment
Share on other sites

Thank you both. I think I understand now.

So if I want to make sure that all `onUpdate`s are called before calling the `call` function then I should attach the `onUpdate` callback to the tween itself, not on the timeline. Otherwise I'll be always missing the last `onUpdate`, which in higher timescale is the only one. Please let me know if I'm wrong. 

Link to comment
Share on other sites

19 minutes ago, angelgbg said:

So if I want to make sure that all `onUpdate`s are called before calling the `call` function then I should attach the `onUpdate` callback to the tween itself, not on the timeline. Otherwise I'll be always missing the last `onUpdate`, which in higher timescale is the only one. Please let me know if I'm wrong. 

With the tweens being that short, yes, you're correct.

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