DEV Community

Cover image for [JS] How to create confetti animations using a button with tsParticles 🎉
tsParticles profile image Matteo Bruni
Matteo Bruni for tsParticles

Posted on • Edited on

[JS] How to create confetti animations using a button with tsParticles 🎉

#showdev #tutorial #javascript #webdev

tsParticles recently has been updated to version 1.30 with new beautiful and realistic confetti animations.

They are awesome but there's a lot to configure, right?

Don't worry, there's a simpler way using the tsParticles confetti preset.

Here a sample starting the animation when a button is clicked

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.

View on GitHub

How to use it

CDN / Vanilla JS / jQuery

The first step is installing tsParticles following the instructions for
vanilla javascript in the main project here

Once added the script you need one more script to be included in your page (or you can download that
from jsDelivr:



<script src="https://cdn.jsdelivr.net/npm/tsparticles"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-confetti"></script>
Enter fullscreen mode Exit fullscreen mode

Or


 javascript
import { tsParticles } from "tsparticles";
import { loadConfettiPreset } from "tsparticles-preset-confetti";
Enter fullscreen mode Exit fullscreen mode

This script MUST be placed after the tsParticles one.

Bundle

A bundled script can also be used, this will include every needed plugin needed by the preset.



<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-confetti/dist/tsparticles.preset.confetti.bundle.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Usage

Once the scripts are loaded you can set up tsParticles like this:



loadConfettiPreset(tsParticles);

tsParticles.load("tsparticles", {
  preset: "confetti",
});
Enter fullscreen mode Exit fullscreen mode

Alternative Usage

This module exports another method for using the confetti preset



confetti("tsparticles", {
  /**
   * @deprecated use count property instead
   */
  particleCount: 50,
  /**
   * @deprecated use position property instead
   */
  origin: {
    x: 50,
    y: 50,
  },
  //------------------------------------------
  angle: 90,
  count: 50,
  position: {
    x: 50,
    y: 50,
  },
  spread: 45,
  startVelocity: 45,
  decay: 0.9,
  gravity: 1,
  drift: 0,
  ticks: 200,
  colors: ["#ffffff", "#ff0000"],
  shapes: ["square", "circle"],
  scalar: 1,
  zIndex: 100,
  disableForReducedMotion: true,
});
Enter fullscreen mode Exit fullscreen mode

This function is available for import too in the tsparticles-preset-confetti package

This method doesn't need to call the loadConfettiPreset method since it's called automatically.

Options

The confetti first parameter is the tsParticles container id and the second parameter is a single options object,
which has the following properties:

  • count Integer (default: 50): The number of confetti to launch. More is always fun... but be cool, there's a lot of math involved. (particleCount can be used too, but it's deprecated)
  • angle Number (default: 90): The angle in which to launch the confetti, in degrees: 90 is straight up.
  • spread Number (default: 45): How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined angle plus or minus 22.5 degrees.
  • startVelocity Number (default: 45): How fast the confetti will start going, in pixels.
  • decay Number (default: 0.9): How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it.
  • gravity Number (default: 1): How quickly the particles are pulled down: 1 is full gravity, 0.5 is half gravity, etc., but there are no limits. You can even make particles go up if you'd like.
  • drift Number (default: 0): How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right.
  • ticks Number (default: 200): How many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you.
  • position Object: Where to start firing confetti from. Feel free to launch off-screen if you'd like. (origin can be used too, but it's deprecated)
    • position.x Number (default: 0.5): The x position on the page, with 0 being the left edge and 1 being the right edge.
    • position.y Number (default: 0.5): The y position on the page, with 0 being the top edge and 1 being the bottom edge.
  • colors Array<String>: An array of color strings, in the HEX format... you know, like #bada55.
  • shapes Array<String>: An array of shapes for the confetti. The possible values are square and circle. The default is to use both shapes in an even mix. You can even change the mix by providing a value such as ['circle', 'circle', 'square'] to use two third circles and one third squares.
  • scalar Number (default: 1): Scale factor for each confetti particle. Use decimals to make the confetti smaller. Go on, try teeny tiny confetti, they are adorable!
  • zIndex Integer (default: 100): The confetti should be on top, after all. But if you have a crazy high page, you can set it even higher.
  • disableForReducedMotion Boolean (default: true): Disables confetti entirely for users that prefer reduced motion.

Customization

Important ⚠️
You can override all the options defining the properties like in any standard tsParticles installation. This works
only with the classic loadConfettiPreset method, the confetti function has its own parameters.



tsParticles.load("tsparticles", {
  particles: {
    color: {
      value: ["#0000ff", "#00ff00"],
    },
  },
  preset: "confetti",
});
Enter fullscreen mode Exit fullscreen mode

Like in the sample above, the white and red colors will be replaced by blue and lime.

React.js / Preact / Inferno

The syntax for React.js, Preact and Inferno is the same.

This sample uses the class component syntax, but you can use hooks as well (if the library supports it).



import Particles from "react-tsparticles";
import { Main } from "tsparticles";
import { loadConfettiPreset } from "tsparticles-preset-confetti";

export class ParticlesContainer extends React.PureComponent<IProps> {
  // this customizes the component tsParticles installation
  customInit(main: Main) {
    // this adds the preset to tsParticles, you can safely use the
    loadConfettiPreset(main);
  }

  render() {
    const options = {
      preset: "confetti",
    };

    return <Particles options={options} init={this.customInit} />;
  }
}
Enter fullscreen mode Exit fullscreen mode

Vue (2.x and 3.x)

The syntax for Vue.js 2.x and 3.x is the same



<Particles id="tsparticles" :particlesInit="particlesInit" url="http://foo.bar/particles.json" />
Enter fullscreen mode Exit fullscreen mode 


function particlesInit(main: Main) {
  loadConfettiPreset(main);
}
Enter fullscreen mode Exit fullscreen mode

Angular 



<ng-particles
  [id]="id"
  [options]="particlesOptions"
  (particlesLoaded)="particlesLoaded($event)"
  (particlesInit)="particlesInit($event)"
></ng-particles>
Enter fullscreen mode Exit fullscreen mode 


function particlesInit(main: Main): void {
  loadConfettiPreset(main);
}
Enter fullscreen mode Exit fullscreen mode

Svelte 




<Particles
        id="tsparticles"
        url="http://foo.bar/particles.json"
        on:particlesInit="{onParticlesInit}"
/>
Enter fullscreen mode Exit fullscreen mode 


let onParticlesInit = (main) => {
  loadConfettiPreset(main);
};
Enter fullscreen mode Exit fullscreen mode

Top comments (7)

Collapse
 
rxxxttt12 profile image
Rxxxttt12 •

Hello Matteo Bruni
I hope all is well your [JS] How to create confetti animations using a button with tsParticles 🎉 is the best but i want to use this code in quiz so how is it possible and I'm using blogger
please help me

Collapse
 
matteobruni profile image
Matteo Bruni •

You can see this sample: codepen.io/matteobruni/pen/rNjLBoY
It starts and stops the animation manually

Collapse
 
rxxxttt12 profile image
Rxxxttt12 •

Friend how to add this code in blogger .. help me

Thread Thread
 
matteobruni profile image
Matteo Bruni •

I don't know, I've never used Blogger. Sorry

Collapse
 
rxxxttt12 profile image
Rxxxttt12 •

Hello Matteo Bruni ..

Thank for your reply 🙏 .. If you know about how to add sound track in quiz when click in options like - correct or wrong sound effects .. please help me

Thread Thread
 
matteobruni profile image
Matteo Bruni •

I've never used sounds in web apps, try asking on Stack Overflow

Thread Thread
 
rxxxttt12 profile image
Rxxxttt12 •

Thank you for your reply .. keep it up

Read next

abhay_yt_52a8e72b213be229 profile image

Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

Abhay Singh Kathayat -

abhay_yt_52a8e72b213be229 profile image

Mastering MobX: Simplified and Reactive State Management for React

Abhay Singh Kathayat -

prince_beec5ccde00b7c6c73 profile image

Toggle Switch Realistic illusion using the core html and core Css Code

Prince -

abhay_yt_52a8e72b213be229 profile image

React.js Explained: A Comprehensive Guide to Building Modern Web Applications

Abhay Singh Kathayat -