DEV Community

loading...
Cover image for Is Particles.js still good in 2021?

Is Particles.js still good in 2021?

Matteo Bruni
Full Stack Developer, mainly working in .NET with web technologies and mobile (Xamarin). WWDC14 Attendee, when Swift was presented, a bit rusty but can work in Swift too.
・4 min read

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.

GitHub logo matteobruni / tsparticles

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

banner

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React, Vue, Angular, Svelte, jQuery, Preact, Inferno

Rate on Openbase jsDelivr Cdnjs npmjs npm lerna CodeFactor Codacy Badge Gitpod Ready-to-Code Run on Repl.it

Do you want to use it on your website?

This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.

You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.

The output files are just JavaScript. 🀩

CDNs and npm have all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted for import syntax.

If you are still interested some lines below there are some instructions for migrating from the old particles.js library.

Library installation

Hosting / CDN

Please use this hosts or your own to…

Discussion (2)

Collapse
ghana7989 profile image
ghana

The last emoji is kind of irritating.
Article is good

Collapse
rikschennink profile image
Rik Schennink

Nice job on reviving this project.

The real challenge is still actively maintaining it, plus responding to new issues and pull requests in 2026 πŸ˜‰