Is Particles.js still good in 2021?

#javascript #html #showdev #webdev

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.

matteobruni / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components