Confetti Falling Animation In Pure JavaScript – confetti.js

Category: Animation , Javascript | August 28, 2019
24 Comments
Demo Download
Author:mathusummut
Views Total:129,532 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:

24 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 ↓
  11. Kevin Link

    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

    Reply ↓
    1. Mier

      Hi Kevin, did you have it working now? I have also problems to get this working. My local package is also read-in correctly.

      Reply ↓
  12. Gomer

    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);
    }

    Reply ↓
  15. Tanya Myoko

    Is there a way I could contain the confetti within a div/element rather than run on the full page?

    Reply ↓
  18. Manav Shah

    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?

    Reply ↓
  19. Sarah Ruggieri

    How do you get the confetti to fall automatically on page load?

    Reply ↓

Leave a Reply