onUpdate&onComplete time confuse

[carlson]

hi all,

if browser fps is 60,then each frame last 16.7ms.

the pic below is a very short anim(10ms),and current frame(frame1) end between anim1 start and end,

i wonder what's the time ainm1 onUpdate&onComplete execute?

is it the end of frame1?or the real time when anim1 end(10ms after anim1 start)?

Any help would be greatly appreciated!

[OSUblake]

Hi carlson,

 

Everything is updated at the end of frame, just like if you were using GSAP's ticker or requestAnimationFrame. So if the first frame last 16.7ms, then it will call onUpdate and onComplete and anim2 will be rendered 6.7ms into its animation. 

 

But you really shouldn't be too concerned about something like that. Is there something in particular you were having trouble with or trying to figure out?

 

[GreenSock]

Yeah, it'd really help if you could explain the "why" behind your question.

 

It's pretty rare that browsers fire things at EXACTLY 16.67ms intervals perfectly all the time. It all depends on CPU load and a lot of other factors but rest assured that GSAP prioritizes proper timing so that if you set something to take exactly 1 second, it'll get as close to that as possible. Some animation engines suffer from "time creep" especially in repeating animations due to the fact that they don't factor in the small gap between when the onComplete fires and when the ACTUAL scheduled end time was. GSAP doesn't suffer from that. 

 

Some engines are purely tick-based where they add a certain amount on each tick which can lead to wildly different durations on different devices because some can't run at 60fps so everything slows down. Again, GSAP doesn't suffer from that. 

 

Once we understand the "why" behind your question, perhaps we'll be able to address your concern better. 

[carlson]

14 hours ago, OSUblake said:

Hi carlson,

 

Everything is updated at the end of frame, just like if you were using GSAP's ticker or requestAnimationFrame. So if the first frame last 16.7ms, then it will call onUpdate and onComplete and anim2 will be rendered 6.7ms into its animation. 

 

But you really shouldn't be too concerned about something like that. Is there something in particular you were having trouble with or trying to figure out?

 

My project is very similar to Microsoft powerpoint, user can define there own animation duration,

in my situation, a user defined a 0.01s anim to make an element from scale100% to scale1%,and then he defined another anim to make the same element from scale100%(which is the last anim's finished style scale1%) to scale9999%,these two anim above are expected to behave like from scale1% to scale99%.

but in fact,sometimes it's behave exactly what i want, but sometimes its behave like this:

0: scale 1% - scale 5%

1: scale 300%

2: scale 9% - scale 99%

i have a map to save elements last style after each anim finished on callback function onCompelet,and next anim got the last style on its onUpdate callback

i ask this question is trying to figure out is it the wrong time that i set&get the last style?

thanks

[Cassie]

I'm a bit lost about where the scale:300% is coming from?

 

You also shouldn't have to manually save the last style? If you use gsap.to the second tween will just use the first tweens final state as the starting point.

Do you have a minimal demo just showing the GSAP tweens that are being applied. Doesn't have to be anything fancy, just a coloured div  scaling up and down so we can understand what you're trying to do.