Particles animations yeeeeeeh 🎉

I've seen a lot of developers use particles.js in their projects. Everyone likes particles effects, but why keep using particles.js?

Why particles.js is no more the best choice

Particles.js was a good library for particles animations but when I tried it in late 2019 I've noticed some bugs after some hours, not just particles bouncing themself weirdly, an error in my console.

Particles broke everything when I tried to disable particles movement. Is this bug fixed now? No.

Particles.js is an abandoned project, no one is maintaining it, and some developers are trying to code workarounds themself.

Nice, but I think everyone is already busy enough with their own project and wasting time fixing bugs of 3rd party libraries is not worth it

But every library has bugs, true. Particles.js has 280 open issues, the older one was opened in November 2014.

Some issues aren't that good, just people asking help, true but some of those issues are already fixed by other developers that submitted their PR, but 51 PRs are still waiting to be merged, some of them are really good. The oldest unmerged PR? January 2016.

This library started having issues with Firefox in 2014, but who uses Firefox in 2021? Chrome is the best! Browsers and the web is going fast, and browsers don't care if a library will broke with the new update. Who wants a broken website when there's a valid alternative.

Another big unsolved issue with Particles.js is mobile devices, yes Particles.js supports (not completely) retina displays but not the touch events and it's not responsive at all.

These are a lot of issues, and that's how to solve them

When I started trying Particles.js in 2019 (yeah I know, I already said that) I wanted a working website so I started making changes to the library and fixed the disabled movement error that was breaking my website. Then I looked for other issues and fixed them, some with merging the good PR I found in the repository.

This gave me a good particles library but I can't update the original one since the author has disappeared so I decided to start a new project.

I was learning TypeScript in that period so I decided to covert the library to TypeScript but having a JavaScript output so everyone can use it without issues.

So TypeScript Particles were born, but particles.ts was already a thing on NPM, another abandoned version of particles.js converted in TypeScript but without a lot of features that I've added and I don't know if the fix to the disabled movement was done.

So I decided to move the ts at the beginning and tsParticles were published in the first months of 2020 just before Italy will be in lockdown due the COVID-19 Pandemic. The pandemic gave me time to focus on this side project since all my free time with friends was gone.

Now tsParticles reached version 1.32.0 with a lot of new features and it's still compatible with particles.js 100%, but particles.js don't have a lot of those new features so the new config won't work backward.

What are the added features to tsParticles?

• Fixed the still particles configuration error: Particles movement options can be disabled without any error
• FPS limiter: the FPS can be reduced so the animations can use less resources on every client, this can be good with some light configurations so they're not much affected
• Background Masking: this feature is one of the oldest but it's still cool. Activating this will make the canvas of a specified color and particles will unveil everything under the canvas or the canvas background. A working sample can be seen here
• New shapes: The following shapes are added, the existing ones are still working (circle, edge, polygon, triangle, image)
  • line
  • images (multiple images, particles.js can have only one)
  • square is replacing edge since it's more clear
  • text (any font, including font awesome and similar fonts), including emojis
  • triangle
  • bubble (plugin)
  • heart (plugin)
  • multiline text (plugin)
  • rounded rect (plugin)
  • spiral (plugin)
• SVG Path Mask: An SVG path, or multiple can be specified to be used to place particles
• New mouse interactions:
  • attract
  • bounce
  • bubble (this is not new, but can change also particles color)
  • connect
  • light (plugin)
  • slow
  • trail
• HTML interaction: Particles can now interact also with HTML elements like <div>s
• Particles rotation: Each particle can have its own rotation, animated or not
• Gradient Links: Particles links can be set to have a gradient color made from the two particles colors (if different)
• Confetti 🎊: There are some settings that creates confetti animations with every kind of particles (text particles too, so emojis can be used too)
• Emitters: Some particles emitting area can be configured, and the particles can be destroyed too when they are out of canvas
• Absorbers: Some particles absorbing areas, like black holes, can be configured, and they can just reset the particle instead of totally destroying it
• Particles life settings: Particles can have a duration and a number of lives so when they are destroyed they have a respawn count
• Twinkle twinkle little star: Twinkling particles are a thing, there are options to set a color based on a frequency so it's possible to configure some twinkling stars in a starry sky configuration
• Vibration: Particles have a vibration configuration too
• Noise: Particles can also have a noise path set instead of a linear one, this can create some cool effects of particles acting differently each time
• Duration: A duration settings was recently added, to the particles animation will stop after a specified amount of time, this can be useful with confetti animations

Is it enough? No? You're right, there are a lot of other customizations that I forgot to write about but everyone is welcome to discover, and since it's not an abandoned project everyone will receive help.

What about React, Vue.js, Angular or other cool frameworks? It's not needed an external library since this project supports with official components:

• React
• Vue.js 2
• Vue.js 3
• Angular
• Svelte
• jQuery
• Riot.js
• Solid.js
• Preact
• Inferno
• Web Components

If these aren't good reasons to migrate from Particles.js to tsParticles I don't know which are.

Any cool idea about this? Any suggestion? Comment or reach me on GitHub.