Confetti Falling Animation In Pure JavaScript – confetti.js

Category: Animation , Javascript | August 28, 2019
Author:mathusummut
Views Total:33,451 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

You Might Be Interested In:


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

  1. 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
  2. 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
  3. KalleKoch

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

    Reply
  4. Patrick Gillespie

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

    Reply

Leave a Reply