translate code to canvas for speed

[Liquid 7 Likes (Newbie)]

Hi there, if it is possible i would like to request help of OSUblake, it's evidently visible than man knows 'how to'.

 

Iin pointing me in right direction or/and help me to translate this into canvas for speed, since animation on it self works nice, but there is another object animated in webgl under it in final stage of deployment, so it suffers a bit.

 

multiplexer is set to 10 , each square has 10px, if you set it to 40 or 60 animation is smooth but with allmost 2600+ squares as it is now you can see slowdown.

On bigger view stage it can go up 20k+ particles, i would change particle count on working example to max 5k or less depending on performance.

 

Only animating squares in canvas which will be placed in div id=content

 

Thank you.

 

See the Pen NWgENWW by Liquidator (@Liquidator) on CodePen

[Cassie 5,649 Likes (Superhero)]

 Hi there,

 

This thread has a bunch of examples that are doing precisely what you're looking for - staggering a number of squares on a canvas with GSAP. 🥳
 

 

[Liquid 7 Likes (Newbie)]

Thank You , reading up.

[Liquid 7 Likes (Newbie)]

i came up with this, 2.5 times speed increase, was hoping for a bit more, maybe someone can take a look and improve some bits.

I cant figure how to make circle at the beggining to transition into square, maybe some tips.

See the Pen BaZGdRO by Liquidator (@Liquidator) on CodePen

 

To really see the difference run both as standalone, preferebly whole area visible without code.

[OSUblake 18,533 Likes (Superhero)]

After a few thousand objects, you're reaching the limits of what canvas can do. After that you really should be using WebGL, like PixiJS or three.js.

 

Lots of good stuff in here.

 

[Liquid 7 Likes (Newbie)]

Thank You OSUblake, i didn't want to go that route, Pixi or three , i know what those are and i was thinking Canavas should be sufficient, well , it is for now, till i really need to ramp up the game.

 

Thanks to both of you Cassie and OSUblake for chiming in.

[Cassie 5,649 Likes (Superhero)]

Nice job implementing it!