TheLazy.Dev
Portfolio GitHub

Blog

showdev |react |javascript |webdev

[React.js] How to create beautiful and realistic confetti animations using tsParticles

matteobruni

Matteo Bruni

Posted on June 29, 2021

[React.js] How to create beautiful and realistic confetti animations using tsParticles

I wrote a post about tsParticles and the new confetti animation created in the 1.30 version.

tsParticles

[JS] How to create beautiful and realistic confetti animation with tsParticles

Matteo Bruni for tsParticles ・ Jun 29 '21

#showdev #javascript #html #webdev

This configuration can be used as is in any React tsParticles installation.

import Particles from "react-tsparticles"

<!-- this component can be placed anywhere -->
<Particles options={/* paste options here */} />
Enter fullscreen mode Exit fullscreen mode

A working sample can be found below

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
πŸ’– πŸ’ͺ πŸ™… 🚩
matteobruni
Matteo Bruni

Posted on June 29, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Server Side Rendering(SSR) With "State Pool" React State Manager
showdev Server Side Rendering(SSR) With "State Pool" React State Manager

August 14, 2021

[React.js] How to create beautiful and realistic confetti animations using tsParticles
showdev [React.js] How to create beautiful and realistic confetti animations using tsParticles

June 29, 2021

I built a modern and open-source blog template πŸ™Œ
showdev I built a modern and open-source blog template πŸ™Œ

October 14, 2020

Phonics ESL - English sounds review tool
showdev Phonics ESL - English sounds review tool

October 6, 2020

I made PocketBook.cc 🌻 a Google Keep alternative that lets you create notebooks and manage important notesπŸ“πŸ¦„
showdev I made PocketBook.cc 🌻 a Google Keep alternative that lets you create notebooks and manage important notesπŸ“πŸ¦„

December 14, 2019