How to prevent tween starting faster than animation ticker ?

[Orzech1080]

Hello

 

First I wanna say I'm fairly new to GSAP and Pixi.js (and JS animations too TBH ). I tried to search for this topic on the forums but couldn't find an answer.

 

So I have this graphics object and I'm trying to animate a simple circle. I'm doing this by tweening its radius and redrawing the circle in the ticker loop. 

What I don't understand is why the tween starts faster than the ticker itself. This isn't clearly visible on Codepen, but when I run this on a browser the logs start with radius being 30-40px wide. I've read in the docs the tween waits for the 1st tick of the ticker. But it clearly does not. (Or does it? I thought ticker starts when the browser is ready and the 1st animation frame is requested..) I also tried starting the ticker on window.load, but the result is the same.

 

Am I doing something wrong? How can I prevent this without putting a delay into the tween? 

See the Pen yLOrByJ by orzech1080 (@orzech1080) on CodePen

[GreenSock]

Nah, you didn't do anything "wrong", but there are two key factors causing the confusion:

1. There's a large startup cost on that very first frame when Pixi loads, creates the canvas, and basically does all its startup tasks. You can look at the delta that gets passed to the ticker listener (2nd parameter) - that first one is quite high. GSAP prioritizes time accuracy in the animations, thus it honors the amount that was elapsed, so for example if 150ms elapses before the next tick, you'll see that tween get rendered as if its playhead is at 150ms. That's the correct behavior. 
2. By default, there's a "power1.out" ease applied (for more natural looking movement), so movement will be quite a bit faster at the start of a tween and slow down at the end. You can set ease: "none" if you prefer a linear ease. 

In my opinion, the best solution here is to just use a single requestAnimationFrame() call to start your animations. So all your Pixi startup stuff will eat up resources on that first "tick"...and you use a requestAnimationFrame() to basically say "as soon as the browser takes a breath and goes to the next tick, start the animation(s)". Here's a fork: 

See the Pen 75c11397af99ce0dc240ab801c361347?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You could tweak the lagSmoothing() settings on the ticker if you want and that could definitely solve this as well, but that would apply to everything moving forward whereas this seems like merely a startup issue for you and the requestAnimationFrame() solution is quite simple. 

 

Does that clear things up? 

[Orzech1080]

Thank you @GreenSock  That cleared up a lot

 

Cheers!