Confetti Falling Animation In Pure JavaScript – confetti.js

Preview:

Description:

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