Oh now i kinda see the problem, so if i understood this correctly, we're always limited to that 16.7ms per tick to update things and render the next frame, and if the animation finishes 14.67ms before the next tick, which means the animation took only 2ms of the whole tick, we will always be left with 14.67ms of wasted time just waiting for the next tick to kick off and execute the restart() function, and that happens on each tick which means if the animations takes just 1s, around 0.8s (60 x 14.67ms) are completely wasted doing nothing but waiting right?
But i'm kinda confused on how does GSAP get around that, so if i got this correctly, GSAP does not restrict itself to the 16.67ms tick to update, instead it fires the onRepeat callback and starts rendering the next frame immediatly after the first one finishes, so according to this example and theoritically speaking, gsap renders about 8 frames in one tick insted of 1 frame, am I correct? So in my case, what happned is this: when i click the mouse to kill the animation, i do that somewhere in the middle of some "tick" but GSAP was already frames ahead (let's say frame 5 ) in that same "tick", so then when the next onRepeat is called, the one that's just after the mouse click, the animation is killed, but when the next tick (the next 16.7ms) kicks off, it renders those extra calculated frames that were calculated before the mouse click.
And that kinda explains why the animation was repeating but stopping on different progresses, it depended on how many extra frames were already rendered before i clicked the mouse i guess.
This is what i got from this ?, not sure if i got this correctly please correct me if I'm wrong.
Thanks for your time, and for the detailed explanation!