DEV Community

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

Matteo Bruni on June 29, 2021

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

Read full post

markwrightdev • Jun 30 '21

Awesome effects! Thanks for sharing

jonerikj • Jun 14 '22

This is great! Is it possible to have the animation stop after running for 30 seconds?

Matteo Bruni • Jun 14 '22

You can set a timer and stop the animation

jonerikj • Jun 15 '22

Thank you! Unfortunately I am very far from being a developer :P Any chance you could show how to include the timer inside the code? :)

Matteo Bruni • Jun 16 '22

const container = await tsParticles.load("tsparticles", { /* your options */ });

setTimeout(() => {
  container.stop();
}, 5 /* seconds */ * 1000);

jonerikj • Jun 16 '22

Thank you. Where exactly do I place this in the code? Sorry for my lack of knowledge to coding.

Matteo Bruni • Jun 16 '22

This is a replacement of the sample seen in the article. You have to keep the previous options, since I've cut them in the sample for readability.

jonerikj • Jun 16 '22

Hmm 🤔 Still not able to make it work. Sorry for being a noob. I have tried placing this code in top and bottom of the js:
codepen.io/jon-erik-josephsen-the-...

Matteo Bruni • Jun 16 '22

Ok you just missed the async function: codepen.io/matteobruni/pen/qBxvjLK

Or you can achieve something a little bit different using emitters life options: codepen.io/matteobruni/pen/eYVXRxR

jonerikj • Jun 20 '22

Perfect! Thank you very much! 😁

Amir-cahyadi • Jul 12 '21

👍 ty