How to create beautiful confetti animations with tsParticles

The new confetti shape

With tsParticles you can create a lot of particles configurations with circles, squares, images, text, polygons, hearts, spirals and other shapes, and you can create yours too.

Some days ago I released the new shape confetti to create beautiful confetti animations with tsParticles so you can keep your config and just change shape to see them appear.

Let's see how to achieve it.

Vanilla JS setup

Let's start with the standard HTML/CSS/JavaScript static website.

<!-- tsParticles div container -->
<div id="tsparticles"></div>

<!-- tsParticles main script -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tsparticles@1.22.1"></script>

<!-- tsParticles confetti shape script -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tsparticles-shape-confetti@1.7.1"></script>

As always you just need your loyal tsparticles div in your page. The id attribute is set to tsparticles here but you can set to any value you want.

/* what no css needed? 🤯 */

If you remember tsParticles have introduced a fullScreen option, if you never used that don't worry. It will be explained now.

// the tsParticles loading script
tsParticles.load("tsparticles", {
  fullScreen: {
    enable: true
  },
  particles: {
    number: {
      value: 0 // no starting particles
    },
    color: {
      value: ["#1E00FF", "#FF0061", "#E1FF00", "#00FF9E"] // the confetti colors
    },
    shape: {
      type: "confetti", // the confetti shape
      options: {
        confetti: { // confetti shape options
          type: ["circle", "square"] // you can only have circle or square for now
        }
      }
    },
    opacity: {
      value: 1, // confetti are solid, so opacity should be 1, but who cares?
      animation: {
        enable: true, // enables the opacity animation, this will fade away the confettis
        minimumValue: 0, // minimum opacity reached with animation
        speed: 2, // the opacity animation speed, the higher the value, the faster the confetti disappear
        startValue: "max", // start always from opacity 1
        destroy: "min" // destroy the confettis at opacity 0
      }
    },
    size: {
      value: 7, // confetti size
      random: {
        enable: true, // enables a random size between 3 (below) and 7 (above)
        minimumValue: 3 // the confetti minimum size
      }
    },
    life: {
      duration: {
        sync: true, // syncs the life duration for those who spawns together
        value: 5 // how many seconds the confettis should be on screen
      },
      count: 1 // how many times the confetti should appear, once is enough this time
    },
    move: {
      enable: true, // confetti need to move right?
      gravity: {
        enable: true, // gravity to let them fall!
        acceleration: 20 // how fast the gravity should attract the confettis
      },
      speed: 50, // the confetti speed, it's the starting value since gravity will affect it, and decay too
      decay: 0.05, // the speed decay over time, it's a decreasing value, every frame the decay will be multiplied by current particle speed and removed from that value
      outModes: { // what confettis should do offscreen?
        default: "destroy", // by default remove them
        top: "none" // but since gravity attract them to bottom, when they go offscreen on top they can stay
      }
    }
  },
  background: {
    color: "#000" // set the canvas background, it will set the style property
  },
  emitters: [ // the confetti emitters, the will bring confetti to life
    {
      direction: "top-right", // the first emitter spawns confettis moving in the top right direction
      rate: {
        delay: 0.1, // this is the delay in seconds for every confetti emission (10 confettis will spawn every 0.1 seconds)
        quantity: 10 // how many confettis must spawn ad every delay
      },
      position: { // the emitter position (values are in canvas %)
        x: 0,
        y: 50
      },
      size: { // the emitter size, if > 0 you'll have a spawn area instead of a point
        width: 0,
        height: 0
      }
    },
    {
      direction: "top-left", // same as the first one but in the opposite side
      rate: {
        delay: 0.1,
        quantity: 10
      },
      position: {
        x: 100,
        y: 50
      },
      size: {
        width: 0,
        height: 0
      }
    }
  ]
});

Yes, thanks a lot of code but I want to see confetti!! 🎉

ReactJS / PreactJS / InfernoJS

As you know tsParticles has React/Preact/Inferno components ready to be used.

I'll include a React CodeSandbox below with the same working configuration that you saw above:

To use it with Preact and Inferno just use your preferred library and component.

Let's just explain what's the difference from Vanilla JavaScript:

First of all you need to install react-tsparticles (or its equivalent package for Preact or Inferno) and the confetti shape tsparticles-shape-confetti

npm install react-tsparticles tsparticles-shape-confetti

or

yarn add react-tsparticles tsparticles-shape-confetti

Then in your React-like code:

import Particles from "react-tsparticles"; // import the tsParticles component
import { loadConfettiShape } from "tsparticles-shape-confetti"; // import the confetti shape

const loadConfetti = (tsparticles) => {
  loadConfettiShape(tsparticles);
}; // create a function that loads the confetti shape in the tsParticles instance

Then just configure the <Particles /> component:

<Particles
      id="tsparticles"
      init={loadConfetti}
      options={{ /* omitted for brevity, it's the same written before */ }} />

Angular

Here you can see a working sample made using Angular, the dependencies are similar to the React sample, just use ng-particles instead of react-tsparticles.

Vue.js

And here you can see a working sample made using Vue.js, the right package this time is particles.vue for Vue.js 2 or particles.vue3 for Vue.js 3.

In the eeeeeeeend

It doesn't even matter...

Ops sorry... If you like tsParticles please support the repository with a small star ⭐️ on GitHub

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, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready!

Particles.js converted in TypeScript, dependency free (*), improved with new cool 😎 features and various bugs fixed and it's actively maintained!

Do you want to use it on your website?

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 easier.

You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.

The output files are just JavaScript. 🤩

CDNs and npm have all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted for import syntax.

If you are still interested some lines below there are some instructions for migrating from…

View on GitHub