Jump to content


translate code to canvas for speed

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

 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. 🥳


  • Like 4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.


  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.