[JS] How to create beautiful and realistic confetti animation with tsParticles
Tags: showdev, javascript, html, webdev
Published: 2021-06-29 17:50:00

Starting from version 1.30.0 tsParticles has new options to create beautiful and realistic confetti animations with every supported particle shape.

Every parameter of the animation can be configured so you can choose which configuration will suit you better.

Let's build this sample configuration:

{% codepen https://codepen.io/matteobruni/pen/KKmKaVb %}

## Background

```
background: {
  color: {
    value: "#000000"
  }
}
```

This sets the black background to the canvas, this is optional, you can have a transparent background omitting this section.

## Full Screen

```
fullScreen: {
  enable: true,
  zIndex: -1
}
```

This sets the canvas to full screen with a zIndex of -1, be careful with `zIndex` set to -1, this will be below every page element, you can set it to an higher value but the `interactivity.detectsOn` should be `"window"` to have particles on top without losing the website interactivity.

## Interactivity

```
interactivity: {
  detectsOn: "window"
}
```

This was explained above, the `detectsOn` property set to `"window"` disabled canvas pointer events, so you can interact with any elements below the canvas `zIndex`. This should be set like with an high `zIndex`, with a `-1` value it's not necessary.

## Emitter

```
emitters: {
  position: {
    x: 50,
    y: 100
  },
  rate: {
    quantity: 10,
    delay: 0.25
  }
}
```

Everyone loves particles cannons, here you are, you have a bottom centered cannon that shoots `10` particles every `0.25` seconds.

The position is specified in percent values, not in pixels, so `100` set to `y` is the bottom of the page, while `50` to `x` is the horizontal center.

## Particles configuration

This is the biggest part, where you can configure every aspect of your particles, or confetti if preferred.

```
particles: {
  /* ... */
}
```

### Color

```
color: {
  value: ["#1E00FF", "#FF0061", "#E1FF00", "#00FF9E"]
}
```

You can set here a single value, or an array of string (or more complex object, but let's keep things *simple* for now).

This value is not applied to emojis and images (they are already colored).

### Number

```
number: {
  value: 0
}
```

The particles number is set to `0` because the particles are shot from the emitter and only those should be used.

If this values is set to any positive value will load random particles in the canvas.

### Move

```
move: {
  decay: 0.05,
  direction: "top",
  enable: true,
  speed: {
    min: 50,
    max: 75
  },
  /* ... */
}
```

This section will configure particles movements inside the canvas, you can apply gravity, speed, directions and other properties.

Some values can be seen above:

- decay: it's a value used to slow down particles
- direction: it's the particles direction, you can set a value like `"top"`, `"top-right"`, `"right"` or an angle in degrees.
- enable: this value must be `true` if you want particles to move, otherwise they will be static
- speed: this value can be a single numeric value or an object like the one above with `min`/`max` properties and each particle will pick one value in that range randomically

#### Gravity

```
gravity: {
  enable: true
}
```

This section part of the `move` options will configure particles gravity, you can just enable it with a default earth gravity (`9.81`) and a max speed of `50`

#### Out Modes

```
outModes: {
  top: "none",
  default: "destroy"
}
```

This section sets the action to do when particles will go off canvas, you can specify this for every border (`top`, `left`, `bottom`, `right`) or a `default` that will be overridden by specific values like in this case, the particle will not be destroyed only if it goes outside the top edge.

### Opacity

```
opacity: {
  value: 1
}
```

This value sets the particles (ops, confetti) opacity value. This can be also a range value like the previous seen `move.speed`.

### Size

```
size: {
  value: 8
}
```

This value sets the particles (ops, confetti) radius value. This can be also a range value like the previous seen `move.speed`.

### Rotate

```
rotate: {
  value: {
    min: 0,
    max: 360
  },
  direction: "random",
  animation: {
    enable: true,
    speed: 60
  }
}
```

This section sets the particles rotation around its center. You can specify a degree angle to `value` or a range of angles like the `move.speed` above. In this case any angle will be picked randomly by each particle.

The `direction` property sets the rotation direction, this property can have 3 values:

- `"clockwise"`
- `"counter-clockwise"`
- `"random"`

The first two are clear, the third value (`"random"`) make every particle choose one of the two previous values randomically, so you can see particles rotates clockwise and counter clockwise.

The `animation` property make the particle rotation animated, otherwise the particle will only have the initial angle. The rotation speed can be set and the animation can be enabled, by default is not.

### Tilt

```
tilt: {
  direction: "random",
  enable: true,
  value: {
    min: 0,
    max: 360
  },
  animation: {
    enable: true,
    speed: 30
  }
}
```

This is the first of the new three particles options, `tilt` will deform the particles like they are seen from another perspective spinning around its center.

The properties of this property are the same seen in the `rotate` section above and it works exactly the same.

### Roll

```
roll: {
  darken: {
    enable: true,
    value: 25
  },
  enable: true,
  speed: {
    min: 5,
    max: 15
  }
}
```

This is the second new property of particles options, `roll` will deform the particles like they are seen rolling around its center making a natural falling effect.

The properties of this section are really simple, enable will activate this effect, speed sets the fall effect speed.

What about `darken`?

There are 3 more options after `speed` and `enable`:

- `backColor`: This sets the back color of the particles when their *back* is visible
- `darken`: This is the first alternative when `backColor` is not set, this will darken by the specified value the particles color create a nice simple shadow
- `enlighten`: This is the latest alternative if none of the above are set or enabled, this will enlighten by the specified value the particles color create a nice simple light effect

In this case the particles (only the one that can be colored) will have a nice shadow while rolling down.

### Wobble

```
wobble: {
  distance: 30,
  enable: true,
  speed: {
    min: -15,
    max: 15
  }
}
```

This is the latest (but not least) new effect introduced in `1.30`.

This effects makes the particles bouncing from left to right simulating air resistance with a really nice effect.

The properties are really simple, enable for activating this, the distance used for enlarging the angle and the wobbling speed.

About the speed I recommend a range with a `min` and a `max` opposite values instead of a single value since the effect is nicer. If only a positive or negative value is set the particles will only wobble right or left.

### Shape

```
shape: {
  type: /* ... */
  /* ... */
}
```

Why `shape` is the latest section explained? Because in this case it's really huge because I want to show all possibilities in the sample but you can choose from:

- circle
- square
- polygon
- line (be careful, this will only works with the stroke color since it's not fillable)
- character (also emojis are accepted or any font like FontAwesome if correctly installed)
- image
- triangle
- star
- bubble (external plugin)
- heart (external plugin)
- multiline text (external plugin)
- rounded rect (external plugin)
- spiral (external plugin, this will be better with stroke color since filled it's kinda ugly)

For each shape you can specify additional options like this:

```
shape: {
  type: "circle",
  options: {
    circle: {
      particles: {
        size: {
          value: 10
        }
      }
    }
  }
}
```

The code below is the sample used in the codepen shown at the beginning.

The polygon options are an array and are randomly picked by each particles creating a pentagon or an hexagon.

The character options specifies the font used by the specified character, the weight, an additional style, and the text to be used for each particle, in this case one emoji per particle randomly picked.

The images are a lot and random picked, they have a bigger size value since they have some padding inside.

```
shape: {
    type: [
        "circle",
        "square",
        "polygon",
        "character",
        "character",
        "character",
        "image",
        "image",
        "image"
    ],
    options: {
        polygon: [
            {
                sides: 5
            },
            {
                sides: 6
            }
        ],
        character: [
            {
                font: "Verdana",
                value: ["💩", "🤡", "🍀", "🍙", "🦄", "⭐️"],
                style: "",
                weight: 400
            }
        ],
        image: [
            {
                src: "https://particles.js.org/images/fruits/apple.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/avocado.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/banana.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/berries.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/cherry.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/grapes.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/lemon.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/orange.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/peach.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/pear.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/pepper.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/plum.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/star.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/strawberry.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/watermelon.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            },
            {
                src: "https://particles.js.org/images/fruits/watermelon_slice.png",
                width: 32,
                height: 32,
                particles: {
                    size: {
                        value: 16
                    }
                }
            }
        ]
    }
}
```

Hope you'll have a lot of fun with tsParticles and the new animations to make beautiful confetti

{% github matteobruni/tsparticles %}