looping circle does not give the desired effect

[rocketman97]

hello everyone, I'm learning gsap and im trying to replicate this looping effect like the code below

See the Pen abQPoJr by razorchoice (@razorchoice) on CodePen

 and I think I'm getting the hang of it, but the issue now is mine does not look as smooth and seems rushed and shaky. pls what am i missing? i could copy and paste the other code, but i want to learn and simplify it for myself.

See the Pen NWEeKpw by razorchoice (@razorchoice) on CodePen

[Cassie]

Hiya! Welcome to the forums, nice work trying to convert this over.

A couple of things.

1) You're calling clear and creating new circles in the update function of a tween currently, that's great. That update will be called every 'tick' of the gsap engine, so on each tick you're clearing the canvas and drawing new circles. Perfect. But you've also added a call to this function into gsap's ticker, so you're also creating a WHOLE new tween on every tick, that new tween is then creating new circles on every tick. 🫠 Ticker inception, ticks all the way down, too much stuff happening. That's where the jankiness is coming from! Easy mistake though.

2) Once that's sorted, maybe just tweak the timing and the ease, that might help make things feel more smooth and less rushed.

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

 

Hope this helps!

 

Have fun and happy tweening

[Rodrigo]

Hi,

 

Another alternative could be to use PIXI or another canvas rendering library that does the heavy lifting for you and you can just use GSAP to create the animations:

https://pixijs.io/examples/#/graphics/simple.js

 

Hopefully this helps.

Happy Tweening!

[rocketman97]

14 hours ago, Cassie said:

Hiya! Welcome to the forums, nice work trying to convert this over.

A couple of things.

1) You're calling clear and creating new circles in the update function of a tween currently, that's great. That update will be called every 'tick' of the gsap engine, so on each tick you're clearing the canvas and drawing new circles. Perfect. But you've also added a call to this function into gsap's ticker, so you're also creating a WHOLE new tween on every tick, that new tween is then creating new circles on every tick. 🫠 Ticker inception, ticks all the way down, too much stuff happening. That's where the jankiness is coming from! Easy mistake though.

2) Once that's sorted, maybe just tweak the timing and the ease, that might help make things feel more smooth and less rushed.
 

 

 

Hope this helps!

 

Have fun and happy tweening

Wow!!! thank you so much for taking time out analize and point out my mistakes, i really appreciate this.  I spent almost 8 hours staring at my screen lol.  

[rocketman97]

12 hours ago, Rodrigo said:

Hi,

 

Another alternative could be to use PIXI or another canvas rendering library that does the heavy lifting for you and you can just use GSAP to create the animations:

https://pixijs.io/examples/#/graphics/simple.js

 

Hopefully this helps.

Happy Tweening!

Thank you! didn't know about Pixi.js, but i'll look into it aswell

[Cassie]

Ah, my pleasure pal! That's what we're here for 💜

[rocketman97]

4 hours ago, Cassie said:

Ah, my pleasure pal! That's what we're here for 💜

hi! 😀

 

22 hours ago, Cassie said:

Hiya! Welcome to the forums, nice work trying to convert this over.

A couple of things.

1) You're calling clear and creating new circles in the update function of a tween currently, that's great. That update will be called every 'tick' of the gsap engine, so on each tick you're clearing the canvas and drawing new circles. Perfect. But you've also added a call to this function into gsap's ticker, so you're also creating a WHOLE new tween on every tick, that new tween is then creating new circles on every tick. 🫠 Ticker inception, ticks all the way down, too much stuff happening. That's where the jankiness is coming from! Easy mistake though.

2) Once that's sorted, maybe just tweak the timing and the ease, that might help make things feel more smooth and less rushed.
 

 

 

Hope this helps!

 

Have fun and happy tweening

Hi! quick question, what are the extra brackets for, like this one "const canvasWidth = (canvas.width = 300);" ?

[GreenSock]

1 hour ago, rocketman97 said:

Hi! quick question, what are the extra brackets for, like this one "const canvasWidth = (canvas.width = 300);" ?

Those really don't accomplish anything extra. 

[Cassie]

What Jack said - I think that was just codepen autoformatting ☺️

[rocketman97]

Alright, thank you!