css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Click, drag & release to shoot canvas confetti particles. Uses the GreenSock Physics2d plugin.


  1. This is awesome! I got confused on the click and drag when the confetti didn't shoot out the other direction. The drag motion made me expect something more like a bow and arrow. Easy way to fix that (if you want) would be to make velocity @ ln 177 negative. Cool pen!

  2. Good pen ^^ i love confettis, but you should add overflow:hidden; in to the body (disable the scroll bar)

  3. Nice one Smith. Looking at your codes made it look easy.

  4. @atwulf Ya agreed. Meant to switch it to something like that but got lazy... anyway now it's oriented properly.

  5. yay! I shoot ya!

  6. Haha this is awesome!

  7. I love that it adjusts for power. I'll start on the right edge of one monitor, drag it over to the edge of the other monitor, and there's a big explosion!

  8. Wow this makes me so happy :) Thanks for making this!

  9. This is fantastic and makes me incredibly happy. great work!

  10. Well, that's awesome.

  11. Hey dude! This pen is great. But.. Previously it's worked differently and must better! What have you done with it? :(

  12. @andreich-tut I'm not sure what you are talking about, it hasn't been changed in over a year :-\

  13. @jscottsmith shoud it look like this? http://take.ms/JSrig Instead of an explosion, thin strips

  14. @andreich-tut Ya that looks like a bug. I never tested it beyond the latest browsers for OSX, which still work fine. What browser/OS are you on?

  15. @jscottsmith sorry for late answer. chrome 61.0.3163.100, safari 11 (12604.

  16. @andreich-tut So strange! everything seems to works fine for me. Do you see any console errors?

  17. Is there a way that it can be done by using a free Jquery drawsvg instead of the paid gsap drawsvg?

  18. @qingliwebsite This does not use GSAP's DrawSVG plugin, it uses TweenLite and the Physics 2D plugin to draw on canvas. You could also easily create this without GSAP or their plugins if you are concerned with licensing.

  19. @jscottsmith I think the Physics 2D plugin is also a bonus plugin members only, hmm but will give it a try and talk to the client about simply buying the membership. Great work by the way! Love it! And im thinking to make a little change and use it for a client, and will credit you, is that ok?

  20. @qingliwebsite Ya I think you're right about the Physics 2D plugin. And yes of course feel free to use any code I've written in this pen. Good luck!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.