Confetti Falling Animation In Pure JavaScript – confetti.js

Category: Animation , Javascript | August 28, 2019
13 Comments
Demo Download
Author: mathusummut
Views Total: 42,257 views
Official Page: Go to website
Last Update: August 28, 2019
License: MIT

Preview:

Confetti Falling Animation In Pure JavaScript – confetti.js

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

See Also:

You Might Be Interested In:

13 thoughts on “Confetti Falling Animation In Pure JavaScript – confetti.js”

  2. Michelle

    Does this not work with GoDaddy websites? I’m having the hardest time trying to get it to work.

    Reply ↓
    1. Gerardo Sampuel

      (index):8 Uncaught ReferenceError: startConfetti is not defined
      at HTMLButtonElement.onclick ((index):8) que hago? me sale este error

      Reply ↓
  6. birnenhans

    Hi there, really nice work!! Thanks for your effort!!! I just can’t get the confetti to stop! 😀 Where and what do I have to edit in your file, to make it stop after 5 sec.? Thanks! 🙂

    Reply ↓
  7. KalleKoch

    hi, thanks for this great script! Is it possible to use images (PNG or SVG) for each confetti particle?

    Reply ↓
  9. Patrick Gillespie

    Very neat project! Is this available on npm? Or do we need to download the script?

    Reply ↓
  10. Sjonny555

    Thanks! BTW, the methods have been renamed to be confetti.start(), confetti.stop(), confetti.toggle(), etc.

    Reply ↓

Leave a Reply