Confetti Falling Animation In Pure JavaScript – confetti.js

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


24 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! :D 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
  5. Sjonny555

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

    Reply
  6. 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
  7. 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
  8. Tanya Myoko

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

    Reply
  9. 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
  10. Sarah Ruggieri

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

    Reply

Leave a Reply