This content originally appeared on DEV Community and was authored by Matteo Bruni
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
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.
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.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
- Use for your website
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Migrating from Particles.js
- Plugins/Customizations
Do you want to use it on your website?
Documentation and Development references here 📖
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…
This content originally appeared on DEV Community and was authored by Matteo Bruni
Matteo Bruni | Sciencx (2022-02-21T15:41:15+00:00) Why everyone should stop using particles.js right now. Retrieved from https://www.scien.cx/2022/02/21/why-everyone-should-stop-using-particles-js-right-now/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.