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

#javascript #typescript #showdev #tutorial

Is Particles.js still good in 2021?

Matteo Bruni for tsParticles ・ Jul 24 '21

#javascript #html #showdev #webdev

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.