Abdou-tech

Yes! I got it that makes perfect sense, thank you so much for the valuable informations you guys are the best ?

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!

Pretty strange, but yeah that seems to be working, thank you so much sir! Just wanted to say it's my first time ever using GSAP and im pretty amazed, really awsome stuff, you guys are are awsome and the support is also great thank you so much guys.

I tried that, still the same problem the animation repeats again for a short period. Here's a codepen link that show what im trying to achieve: https://codepen.io/abdoutech19/pen/vYyEJRj Thank you!

Thank you so much for you reply! That makes much more sense haven't thought of that, im trying to achieve the same result using your solution but have one small issue: just before stopping, the animation kicks off again for a very short period then it stops (the progress is around 0.05 when it stops) any idea of what's causing this?

Oh i just found a solution i don't know if it's the only one but for those intrested: you basically pause the timeline, then create another timeline let's call it tl2, then you call the to() method on tl2 passing the first timeline as the target, and then you animate the progress property to 1 normally just like you would do with any other css property, if you want to do something when the animation finishes, just pass a callback function to the onComplet property just like this: const endLoading = () => { // tl is a timeline object tweening infinitly... tl.pause(); let tl2 = gsap.timeline(); tl2.to(tl, { duration: 0.5, progress: 1, onComplete: () => { tl.kill(); console.log("Finished!"); // Do some stuff... }, }); };

I don't have a codepen but basically what i want to achieve is this: I have some data loading in the background, and i'm using GSAP3 to create a timeline that's animating an svg infinitly, it's a preload animation basically. What i want to do is that when the data is loaded, i want to pause the current timeline object, animate it until the progress is 1, and then when the animation is completely finished i want to create another animation to smoothly animate the preloader out of the screen and then show the loaded data. I saw an example of this in GSAP2 using TweenMax where: you pass the tweenmax object into the to() method, animate the progress property and then assign a callback function to the onComplete() property to kill the timeline object, but that doesn't seem to work in GSAP3, the svg abruptly jumps to the it's final state (where the progress is equel to 1) instead of animating to it. Can you please tell me how can i achieve this? I can't seem to find any example of this in GSAP3. Thanks in advance!