Should I stop using particles.js? Why?
Yes, a lot of devs are using particles.js
for their websites displaying simple and cool particles animations.
46 millions (at the moment of writing) of monthly requests on JSDelivr, not bad I should say. But all these websites can have a better alternative, instead of using an old library with a HUGE memory leak.
Memory leak? Uh?
If you don't believe me, test it out yourself below
And if you don't trust me, the button code is not a classic click counter, it's a counter of the particles.js
instances.
const updateInstances = () => {
document.querySelector("#instances span").innerText = `${pJSDom.length}`;
};
const refreshParticles = () => {
particlesJS("particles-js", {
interactivity: {
detect_on: "window"
},
particles: {
number: {
value: 200
},
move: {
speed: 6
},
size: {
value: 1
}
}
});
updateInstances();
};
document
.querySelector("#instances button")
.addEventListener("click", refreshParticles);
This is the code used in the CodePen, it's already visible but it's easier to read it here. Feel free to test it in your particles.js
After a few clicks the button is not responding, am I right?
Isn't it enough?
If you have a screen with more than 60hz
refresh rate, try changing it and see the sample with Chrome, is it getting slower or faster depending on the refresh rate, right?
Lot of devices are getting 120hz
refresh rate, or even 144hz
, and I don't think you want different animations with different rates.
So what should you do?
There's already a libary fixing all these issues, and many other that you can read here
5 reasons to use tsParticles and not Particles.js
Matteo Bruni for tsParticles ・ Mar 13 '20
Is Particles.js still good in 2021?
Matteo Bruni for tsParticles ・ Jul 24 '21
The replacing library is tsParticles, which can start also with a particles.js
configuration.
Be careful when upgrading from particles.js
, tsParticles
has a default fullScreen
option set, so particles will start set as background with a z-index: 0
, and the particles.move.speed
needs to be slowed down, since particles.js
has a bug (strange, uh?) with that value, horizontal and vertical particles were faster than the others.
With the migration, you'll get also confettis, fireworks, particles spawning from areas, more interactions, more particles shapes, and more...
tsParticles
is already being used a lot:
212 millions (at the moment of writing) of monthly requests on JSDelivr, 166 millions more than particles.js
, and you can be part of this change.
Ok, lot of words, but here's the proof that almost the same code is not having a memory leak
tsParticles - no memory leak
Again, the button is not faking the update, here's the code:
const updateInstances = () => {
document.querySelector("#instances span").innerText = `${
tsParticles.dom().length
}`;
};
const refreshParticles = () => {
tsParticles.load("tsparticles", {
background: {
color: "#000"
},
interactivity: {
events: {
onClick: { enable: true, mode: "push" },
onHover: {
enable: true,
mode: "repulse"
},
resize: true
},
modes: {
push: { quantity: 4 },
repulse: { distance: 200, duration: 0.4 }
}
},
particles: {
color: { value: "#ffffff" },
move: {
bounce: false,
direction: "none",
enable: true,
outModes: "out",
random: false,
speed: 2,
straight: false
},
number: { density: { enable: true, area: 800 }, value: 200 },
opacity: {
value: 0.5
},
links: {
enable: true
},
size: {
value: 1
}
}
});
updateInstances();
};
document
.querySelector("#instances button")
.addEventListener("click", refreshParticles);
It's a bit different, mainly the configuration, since almost every feature is disabled by default.
And try the refresh rate test, the particles speed remains the same.
You're welcome.
tsparticles / 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
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- …
Top comments (0)