animationDuration not working

[wireseo]

Hi, I'm creating a custom particle that disintegrates then reassembles, but I want to make this a very long animation (around 10 seconds or more).

The custom particle is visible in my code and works fine, just that it seems like it's fixed to 1000 ms. I know this library is a bit old but was wondering if anyone can help me figure out why changing the animation druation isn't working.

var ReassembleParticle = function () {
    this.name = "ReassembleParticle";
    this.animationDuration = 300000; // in ms

    this.speed = {
      x: -3 + Math.random() * 6,
      y: -2 + Math.random() * 4,
    };
    this.radius = 0 + Math.random() * 5;
    this.life = 30 + Math.random() * 10;
    this.remainingLife = this.life;

    this.firstRun = true;
    this.draw = (ctx) => {
      if (this.firstRun) {
        this.firstRun = false;
        this.startX += Math.random() * 20;
      }

      // Determine if we're in the "disintegrate" or "reassemble" phase
      const isReassembling = this.remainingLife <= this.life / 2;

      if (this.remainingLife > 0 && this.radius > 0) {
        ctx.beginPath();
        ctx.arc(this.startX, this.startY, this.radius, 0, Math.PI * 2);
        ctx.fillStyle =
          "rgba(" +
          this.rgbArray[0] +
          "," +
          this.rgbArray[1] +
          "," +
          this.rgbArray[2] +
          ", 1)";
        ctx.fill();
        this.remainingLife--;

        // If reassembling, reverse the changes (increase position and radius)
        if (isReassembling) {
          this.radius += 0.1;
          this.startX -= this.speed.x;
          this.startY -= this.speed.y;
        } else {
          // Disintegrating phase
          this.radius -= 0.1;
          this.startX += this.speed.x;
          this.startY += this.speed.y;
        }
      }
    };
  };

[ZachSaucier]

Hey wireseo! I'm glad you're getting use out of this old library 😄

Can you perhaps make a demo using something like CodePen?

If you're just using vanilla JS you can load these resources in the "Add External Scripts/Pens" section to get Disintegrate loaded:

• https://html2canvas.hertzen.com/dist/html2canvas.min.js
• https://codepen.io/ZachSaucier/pen/QVBKLm.js