onRepeat doesn't reflect repeat property

[swp_2019]

hi everybody!

 

i'd like to simulate a loading from 0% to 100%..

by setting repeat to 100 i supposed the "onRepeat" callback had to be fired 100 times, but i had no luck

once increased the time ( seems >= 1800ms )  it behave as expected, but with lower time (1000 in the pen) the repeat never reach 100

any clue? thanx in advance

See the Pen oNNavVq by yetoto3475 (@yetoto3475) on CodePen

[GreenSock]

Yep, that's actually expected behavior. Let me explain...

 

The entire engine updates in sync with requestAnimationFrame which typically fires 60 times per second (or less, if there is heavier load). That means roughly every 17ms. A pulse goes through the engine and the playheads move accordingly for all animations. At that point, if the playhead has moved past where a certain animation would repeat, it fires the onRepeat. It doesn't fire the same callback multiple times on a single playhead update - that would be bad. 

 

So in your example, you're telling it to repeat every 10ms which is almost half of the refresh rate, so on each "tick", the playhead may move across multiple repeat points (but of course it'll only fire one). 

 

Can you help me understand WHY you're building something this way? You literally want a function called 100 times per second? For what purpose exactly? I suspect there's a much cleaner, more efficient solution that perhaps we could help with if we understood the "why" behind your question. 

[swp_2019]

baaah! sorry for being so lazy, it makes perfect sense now, thx!

 

the pen is oversimplified, i have X items which starts the tween with different duration, i wanted to emulate a countdown, so used repeat: -1 and increased an external index onRepeat, but as u can guess, that didn't work too.. and now i understand the reason why

for my purpouse should be ok check the value on the callback, but using time to evaluate and get the percentage..

 

i think the timeline would make it cleaner.. but for now i'm quite happy! ?