DEV Community

Cover image for Why everyone should stop using particles.js right now
Matteo Bruni for tsParticles

Posted on • Edited on

Why everyone should stop using particles.js right now

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.

particles.js JSDelivr

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);
Enter fullscreen mode Exit fullscreen mode

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:

tsParticles JSDelivr

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);
Enter fullscreen mode Exit fullscreen mode

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.


GitHub logo 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.

Top comments (0)