A useful front-end confetti animation library • Hacker News Board

Re: A useful front-end confetti animation library

#71

Post by eddieroger » Thu, Apr 25, 2024, 3:24 PM UTC

ericol wrote: post #59

Go multi click on the run button for the "School Pride" demo. I double dare you.

Challenge accepted. I clicked until the confetti froze up. I was impressed while I couldn't trigger new confetti of any kind, the page still scrolled, and the tab could be closed without killing my browser. It was fun.

Re: A useful front-end confetti animation library

#72

Post by huhtenberg » Thu, Apr 25, 2024, 3:27 PM UTC

thih9 wrote: post #55

This is cool and impressive. At the same time I don't want to see it running on any website that I use. And especially - I wouldn't want to see confetti accompany newsletter popups or adding products to basket.

This has its place, e.g. on a completion of a game or some such.

Re: A useful front-end confetti animation library

#73

Post by nicky0 » Thu, Apr 25, 2024, 3:28 PM UTC

amelius wrote: post #66

ABNW wrote: post #40

Earlier quoted context omitted.

Correct! Disable Pointer Events has surprising utility!

What if you wanted to add the requirement that the user had to click on 1 specific piece of confetti?

Then you have a fun programming challenge.

Re: A useful front-end confetti animation library

#74

Post by Andrex » Thu, Apr 25, 2024, 3:38 PM UTC

thih9 wrote: post #55

This is cool and impressive. At the same time I don't want to see it running on any website that I use. And especially - I wouldn't want to see confetti accompany newsletter popups or adding products to basket.

I think the only "legitimate" use would be something like YouTube's like button, which has a cool animation (and vibrates the device if using the mobile app). Very pleasant UX.

Re: A useful front-end confetti animation library

#75

Post by swah » Thu, Apr 25, 2024, 3:51 PM UTC

Looks a lot like Raycast one :)

Re: A useful front-end confetti animation library

#76

Post by strongpigeon » Thu, Apr 25, 2024, 4:13 PM UTC

This is really good. That image you have on the README now makes me want to have a depth of field effect on the confettis as well as multiple layers!

Re: A useful front-end confetti animation library

#77

Post by wackget » Thu, Apr 25, 2024, 4:13 PM UTC

Useful for annoying your visitors?

Why on earth would they not enable the setting which honours the `prefers-reduces-motion` media flag for users who don't want stuff flying all over their screens?!

Re: A useful front-end confetti animation library

#78

Post by albert_e » Thu, Apr 25, 2024, 4:19 PM UTC

I solve crosswords on downforacross.com and solving a puzzle there results in confetti.

Maybe they could use some of this better performing code to make it feel lighter.

Other than "fun" sites and sparing usage ... I wouldn't want to see such animations everywhere though.

Re: A useful front-end confetti animation library

#79

Post by Zebfross » Thu, Apr 25, 2024, 4:33 PM UTC

I added confetti to our salespeople's admin dashboard for when they make a sale. Surprisingly enjoyable and motivating.

Re: A useful front-end confetti animation library

#80

Post by ecuaflo » Thu, Apr 25, 2024, 4:34 PM UTC

chedabob wrote: post #29

lambaro wrote: post #15

Earlier quoted context omitted.

Hard to get much more obvious than that. How else did you think this was implemented as a front-end library?

If someone told me it was pure CSS, I'd believe them. I'm not a frontend dev, so I'm always impressed by what you can now do without having to import a whole JS library.

I am a frontend dev and agree it could be done with CSS similar to this [0]

[0] https://codepen.io/jh3y/pen/oNqdmbW