That's it friend! Update your confetti canvases border colors or tweak the page to your hearts content! 🎉

class Progress {
  constructor(param = {}) {
    this.timestamp = null;
    this.duration = param.duration || Progress.CONST.DURATION;
    this.progress = 0;
    this.delta = 0;
    this.progress = 0;
    this.isLoop = !!param.isLoop;

    this.reset();
  }

  static get CONST() {
    return {
      DURATION : 1000
    };
  }

  reset() {
    this.timestamp = null;
  }

  start(now) {
    this.timestamp = now;
  }

  tick(now) {
    if (this.timestamp) {
      this.delta = now - this.timestamp;
      this.progress = Math.min(this.delta / this.duration, 1);

      if (this.progress >= 1 && this.isLoop) {
        this.start(now);
      }

      return this.progress;
    } else {
      return 0;
    }
  }
}

class Confetti {
  constructor(param) {
    this.parent = param.elm || document.body;
    this.canvas = document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");
    this.width = param.width || this.parent.offsetWidth;
    this.height = param.height || this.parent.offsetHeight;
    this.length = param.length || Confetti.CONST.PAPER_LENGTH;
    this.yRange = param.yRange || this.height * 2;
    this.progress = new Progress({
      duration : param.duration,
      isLoop : false
    });
    this.rotationRange = typeof param.rotationLength === "number" ? param.rotationRange
                                                                   : 10;
    this.speedRange = typeof param.speedRange === "number" ? param.speedRange
                                                                   : 10;
    this.sprites = [];

    this.canvas.style.cssText = [
      "display: block",
      "position: absolute",
      "top: 0",
      "left: 0",
      "pointer-events: none"
    ].join(";");

    this.render = this.render.bind(this);

    this.build();

    this.parent.appendChild(this.canvas);
    this.progress.start(performance.now());

    requestAnimationFrame(this.render);
  }

  static get CONST() {
    return {
        SPRITE_WIDTH : 9,
        SPRITE_HEIGHT : 16,
        PAPER_LENGTH : 100,
        DURATION : 8000,
        ROTATION_RATE : 50,
        COLORS : [
          "#F2D0C2",
          "#EA9F7E",
          "#fc968a",
          "#F19D2E",
          "#E96F5D",
          "#9FD2D5",
          "#0A677A"
        ]
    };
  }

  build() {
    for (let i = 0; i < this.length; ++i) {
      let canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d");

      canvas.width = Confetti.CONST.SPRITE_WIDTH;
      canvas.height = Confetti.CONST.SPRITE_HEIGHT;

      canvas.position = {
        initX : Math.random() * this.width,
        initY : -canvas.height - Math.random() * this.yRange
      };

      canvas.rotation = (this.rotationRange / 2) - Math.random() * this.rotationRange;
      canvas.speed = (this.speedRange / 2) + Math.random() * (this.speedRange / 2);

      ctx.save();
        ctx.fillStyle = Confetti.CONST.COLORS[(Math.random() * Confetti.CONST.COLORS.length) | 0];
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.restore();

      this.sprites.push(canvas);
    }
  }

  render(now) {
    let progress = this.progress.tick(now);

    this.canvas.width = this.width;
    this.canvas.height = this.height;

    for (let i = 0; i < this.length; ++i) {
      this.ctx.save();
        this.ctx.translate(
          this.sprites[i].position.initX + this.sprites[i].rotation * Confetti.CONST.ROTATION_RATE * progress,
          this.sprites[i].position.initY + progress * (this.height + this.yRange)
        );
        this.ctx.rotate(this.sprites[i].rotation);
        this.ctx.drawImage(
          this.sprites[i],
          -Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)) / 2,
          -Confetti.CONST.SPRITE_HEIGHT / 2,
          Confetti.CONST.SPRITE_WIDTH * Math.abs(Math.sin(progress * Math.PI * 2 * this.sprites[i].speed)),
          Confetti.CONST.SPRITE_HEIGHT
        );
      this.ctx.restore();
    }

    requestAnimationFrame(this.render);
  }
}

(() => {
  const DURATION = 10000,
        LENGTH = 120;

  new Confetti({
    width : window.innerWidth,
    height : window.innerHeight,
    length : LENGTH,
    duration : DURATION
  });

  setTimeout(() => {
    new Confetti({
      width : window.innerWidth,
      height : window.innerHeight,
      length : LENGTH,
      duration : DURATION
    });
  }, DURATION / 3000);
})();

If you are adding the confetti to an EXISTING page, you can select the text box and copy the following code and paste it into your current pages Page Loaded Javascript and follow Step 2 to edit the confetti colors.

Select the page name in the Page tab and open the Page Loaded Javascript code panel.

Once the panel is open, go halfway down and we will ONLY focus on the COLORS section. Here you can add as many or as little as you want. Simply replace the preset colors with your brand colors. If you have less colors than what is provided, delete the remaining lines of hex codes and make sure your final line has the comma removed. Click SAVE.

In your current design you want to add your success message to, click Select New Page. Go to My Library and locate the '22 Limited Edition Kit and select the "Confetti" page, Apply My Fonts and Colors and ADD.

Confetti Canvas

Instructions for your new

Preview instructions on Desktop :)