Jump to content


200 particles, tween or canvas?

Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,


This is not really a script problem, but more of an advice needed.

If I'm doing a 200 particle, particle effect, is it better to tween 200 individual items or to use canvas drawing?

If I understand correctly, if you're using tweens, the browser will be managing individual 200 items every second to animate while if you use canvas, it will be managing one big item but still drawing 200 items in it every second. Is there a performance difference to this?

Also, most particle effects I see are using shapes to generate, but if I need to use img files to generate out the particles, is it a bad idea?

Link to comment
Share on other sites

Hi Learning,


Canvas. ;)


If you can work with Canvas, go with it. It gives you better performance than DOM elements, specially when you start adding larger amounts of particles.


There are dozens of threads around here going over particles and GSAP, do a quick search (or just hunt down OSUBlake's posts) and you'll see loads of examples.


Here's a couple:

See the Pen BjNZYP by osublake (@osublake) on CodePen


See the Pen vNwRdO by osublake (@osublake) on CodePen

  • Like 1
Link to comment
Share on other sites

Hi Dipsom,

Yea, I actually searched the threads for particle examples and built one with an example in the threads.
I don't really see a lag in it, but just to be safe I wanted to know if it's the optimal way of doing particles.

I will go check out OSUBlake's posts as suggested!

Link to comment
Share on other sites

  • Solution

You'll get away with a certain number of particles on DOM elements, desktops will not break a sweat, mobiles might struggle a bit.


The optimal way of doing particles is using Canvas, more optimal would be using WebGL (but that can be overkill) - A specialised library such as Pixi will be the best solution, really. But Canvas will suffice if you're not doing much else.

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