Live data from Hacker News

A useful front-end confetti animation library

github.com

81–90 of 125 posts

Re: A useful front-end confetti animation library

#81
post #77

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?!

Agreed. I see really no good reason not to enable this by default.

Re: A useful front-end confetti animation library

#82
post #66
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?

Add a click event listener to the body and overlay the event-coordinates on the canvas.

Re: A useful front-end confetti animation library

#83
post #65
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.

The strange thing is this can be used effectively. I don't know about full-screen like this, but we were visiting a client recently who used a certain project management software and when you closed an item out, the button changed to green and had this effect on it. It was subtle, but noticeable enough that after the meeting another developer and I both said "that was a pretty neat effect". It conveyed the sense of "…

Asana does that, and it's optional. I like it whenever it happens too!

Re: A useful front-end confetti animation library

#86
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.

Yep, on one of the products I built, I use this when a person subscribes to the paid tier. It's really nice, not too obtrusive, but it's fun! Plus, it only happens on that specific scenario, so it's not overdone.

Pipedrive CRM also does this when you close a deal, they even previously had a person shooting a hoop or something, that was nice. It's rewarding!

Re: A useful front-end confetti animation library

#87
post #66

Earlier quoted context omitted.

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

Add a click event listener to the body and overlay the event-coordinates on the canvas.

Will the canvas allow you to hit-test the confetti piece given the coordinate?

Re: A useful front-end confetti animation library

#88
post #74
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.

Having the like button do an animation when your video mentions that liking it would be helpful is the only good UX choice I have seen on YouTube since... playlists?

Re: A useful front-end confetti animation library

#89
This reminds me of the early Internet in the 90s and 2000s, you had falling snow and star animations everywhere.

This is a Javascript library, but it couldn't have been JS back in those days.

Anyone have an idea how people built stuff like this without JS? I'm curious.

Re: A useful front-end confetti animation library

#90
post #89

This reminds me of the early Internet in the 90s and 2000s, you had falling snow and star animations everywhere. This is a Javascript library, but it couldn't have been JS back in those days. Anyone have an idea how people built stuff like this without JS? I'm curious.

JavaScript has been about since 1995, and certainly by no later than the early 2000s was used for these animations.
Post reply on HN