confetti.js is a vanilla JS library for creating a configurable, high-performance confetti falling animation using HTML5 canvas and requestAnimFrame API.
How to use it:
Download and import the JavaScript ‘confetti.js’ into the html document.
<script src="confetti.js"></script>
Start the confetti falling animation.
startConfetti();
Stop the confetti falling animation.
stopConfetti();
Toggle the confetti falling animation.
toggleConfetti();
Pause the confetti falling animation.
pauseConfetti();
Resume the confetti falling animation.
resumeConfetti();
Toggle whether the confetti animation is paused.
togglePause();
Destroy the confetti falling animation.
removeConfetti();
Check if the animation is running.
isRunning();
Check if the animation is paused.
isPaused();
Specify the maximum number of the confetti.
confetti.maxCount = 200;
Set the animation speed in milliseconds.
confetti.particleSpeed = 3;
Set the frame interval.
confetti.frameInterval = 20;
Set the alpha opacity.
confetti.alpha = 1.0;
Decide whether to use gradients
confetti.gradient = false;
Changelog:
08/28/2019
- Small potential bug fixes
08/01/2019
- stop confetti drifting to the right
06/10/2019
- Modified confetti max behaviour
06/09/2019
- Simplified usage
06/05/2019
- Bugfix
06/03/2019
- Added gradient and transparency support
04/29/2019
- Updated
02/05/2019
- Added isConfettiRunning function
See Also:
Canvas Confetti: Custom Confetti Bursts with JavaScript
Custom Confetti Bursts in JavaScript – js-confetti
Lightweight JS Library For Creating Interactive Particles – tsparticles
Canvas Particle Animation Library for Web Backgrounds – particles-js
Add Canvas Confetti Effects to Any Website with Vanilla Confetti
Mouse-Following Confetti Effect for Your Website
Create Celebration Fireworks/Confetti Animations With DOM-Particles Library
🎉 Simple Celebrate Confetti Animation In JavaScript – Party.js
Really awesome, minimalistic and clean! Thumbs up
Does this not work with GoDaddy websites? I’m having the hardest time trying to get it to work.
(index):8 Uncaught ReferenceError: startConfetti is not defined
at HTMLButtonElement.onclick ((index):8) que hago? me sale este error
use confetti.start()
Great script, thank You!
Nice :) Thanks!
Thank you so much for sharing your effort! :D
Hi there, really nice work!! Thanks for your effort!!! I just can’t get the confetti to stop! :D Where and what do I have to edit in your file, to make it stop after 5 sec.? Thanks! :)
How do we put it in a html document ? @birdenhans ?
hi, thanks for this great script! Is it possible to use images (PNG or SVG) for each confetti particle?
Cool script. Thanks
Very neat project! Is this available on npm? Or do we need to download the script?
Thanks! BTW, the methods have been renamed to be confetti.start(), confetti.stop(), confetti.toggle(), etc.
Not the best programmer, so I am probably doing something wrong, but I just spend ~45 mins trying to get this package to work and only got “Uncaught TypeError: confetti.start is not a function”
I can confirm that my local package is read-in correctly too, so IDK
Hi Kevin, did you have it working now? I have also problems to get this working. My local package is also read-in correctly.
For those having issues “stopping” the confetti — remember that using the confetti.start() will call the function immediately due to the (). Instead describe in a variable and call that in a setTimeout.
This worked for me for a 3 second burst.
function myConfetti() {
fetti = confetti.toggle;
setTimeout(fetti, 100);
setTimeout(fetti, 3000);
}
Thank you so muchm, Great animation
Thank you!!
Is there a way I could contain the confetti within a div/element rather than run on the full page?
getContext() of undefined :(
Download link not working kindly fix it
Fixed. Thank you!
I am not able to get the confetti running over by buttons and body, it is running below the footer for some reason. What should I do?
How do you get the confetti to fall automatically on page load?