5 ms·

I'm a sucker for good little microinteractions. The author's checkbox may not be one of those, as it seems a bit overdone, but I'd have to try it to be sure. It

I'm a sucker for good little microinteractions. The author's checkbox may not be one of those, as it seems a bit overdone, but I'd have to try it to be sure. It's easy to go too far. But, some other examples that I love: • https://www.joshwcomeau.com/animation/3d-button https://www.joshwcomeau.com/animation/3d-button The red "push me" button is great, but also check out the sun/moon icon near the top right! • https://www.jam3.com/#contact https://www.jam3.com/#contact The hover states on the buttons. • https://citymapper.com https://citymapper.com The top-left hamburger icon. (I also happen to be quite proud of the hover states on my own site: https://jonathanalland.com/ https://jonathanalland.com/) Making this type of stuff is definitely what I miss most about working in web design.

Doxin 4y ago
You might be interested in checking out the playdate[0]. It's a handheld game console that's absolutely chock full of these sorts of things and it's absolutely delightful. For example to unlock it you need to press the unlock button twice. If you press it once one eye opens, if you press it twice both eyes open and the thing unlocks. If you press once and wait a bit a thought bubble pops up telling you you need to press it twice.
qbit42 4y ago
The sun/moon button is unreasonably satisfying!
- asadlionpk 4y ago
  Is it due to the sound it makes?
  - Wowfunhappy 4y ago
    The sound is a huge piece, but it wouldn't be as good without the visuals, they go together!
  - frosted-flakes 4y ago
    The sound is unreasonably irritating. Basic actions like clicking should not play sounds out of my speakers.
bombcar 4y ago
The hamburglar icon is a perfect example - the whimsey happens after the action is performed (arguably the menu should appear immediately instead of pop out, but it's pretty quick) instead of delaying the action until the animation completes.
- jolmg 4y ago
  > arguably the menu should appear immediately I like that the rotation makes it seem like a rack and pinion mechanism, moving the menu in and out. https://en.wikipedia.org/wiki/Rack_and_pinion https://en.wikipedia.org/wiki/Rack_and_pinion The double bounce at the end seems like a needless delay, though. Access to the menu would be quicker without it.
  - deleted 4y ago
    [deleted]
- chrismorgan 4y ago
  It’s pretty slow. The movement in isn’t too slow (though it’d be better faster), but I find the little bounce at the end to be slow and disconcerting (that’s not the way a physical spring would go). I’d be inclined to almost double the speed, halve the bounce and speed it up even more. More interesting is something exposed in the dev tools. I managed to die.
  - Wowfunhappy 4y ago
    Yeah, I think that bounce at the end could use a bit of tightening up. I would have made it quicker but with less horizontal movement, so it feels more elastic.
- layer8 4y ago
  The animation is highly distracting. It draws the attention to the button instead of to the menu the user now wants to use. The animation creates a “wow” effect on first use, but that’s exactly the kind of visual affordance you don’t want on a UI element for routine use.
hetspookjee 4y ago
What a great list. Please share more if you have any! Just started since recently with tailwind and there’s an entire world opening up.
- Wowfunhappy 4y ago
  One more I initially resisted sharing because I worked on it: https://2019-annual-report.fnih.org/ https://2019-annual-report.fnih.org/ The hover states on "Understanding", "Breakthroughs", "Solutions". There's no framework involved by the way, it's just some CSS transforms. :)
agumonkey 4y ago
very reminiscent of 2future flash designer
CTmystery 4y ago
To each their own. I find the hover states on the jam3 site unintuitive, like the clickable area is moving out from under me, forcing me to track it before perfoming the actual click. Reminds me of a flash ad where the target moves as your mouse gets closer.
- rr888 4y ago
  hover sucks for touchscreens
  - Wowfunhappy 4y ago
    It's an optional little rollover animation. So what if it doesn't play on a touch screen?
- bavila 4y ago
  The way the button text moves on hover is also distracting and annoying.
  - srik 4y ago
    Yep that hover animation alters user perception of it's fundamental state, from a button to link. Not saying experimentation is bad, but in general that kind of incongruence is a big no-no for production UX.
- secondcoming 4y ago
  And they won’t let you into their page unless your device is in portrait mode
nomilk 4y ago
Paul Graham's essay on design says good design is slightly humorous. I find the red button slightly funny, yet have no idea why.
- talos2110 4y ago
  It’s because the animation timing and easing, methinks. Look here for basics https://youtu.be/c7HXLl8YREM https://youtu.be/c7HXLl8YREM
- Wowfunhappy 4y ago
  The citymapper hamburger icon definitely has a humorous element too! I'm not sure I agree with the quote though. It so happens that the websites I linked all had an element of playfulness, but I don't think that's required. Here's a site I worked on. Check out the hover animation for the four tiles underneath "Our Innovative and Customer-Driven Businesses": https://web.archive.org/web/20190610202159if_/http://2018ar.utc.com/ https://web.archive.org/web/20190610202159if_/http://2018ar.... IMO, there's nothing playful or "humorous" about this animation. I would describe it instead as "elegant"—it gives the site an extra level of sophistication. Another (very small) example might be the "Apply Now" button on https://www.airforce.com/ https://www.airforce.com/
- latchkey 4y ago
  > Paul Graham's essay on design http://www.paulgraham.com/design.html http://www.paulgraham.com/design.html http://www.paulgraham.com/desres.html http://www.paulgraham.com/desres.html
  - nomilk 4y ago
    See also: Taste for Makers: http://www.paulgraham.com/taste.html http://www.paulgraham.com/taste.html (under section 'Good design is often slightly funny')
- markdown 4y ago
  Graham is hardly an authority on design.
alpaca128 4y ago
Wow, the hover states in the second link are incredible. They feel "just right". > I also happen to be quite proud of the hover states on my own site Those are nice as well, though I'm not sure why the button animation is so delayed. It felt like I missed the button with the cursor until it suddenly started wiggling.
- Wowfunhappy 4y ago
  This might be something I need to rethink—the entire card is a link, not just the tiny button. I don't expect most users to hover for long enough to see the wiggle; it's meant to say: "alright, you've been thinking about this for a while now, come on and click already."
layer8 4y ago
> https://www.joshwcomeau.com/animation/3d-button https://www.joshwcomeau.com/animation/3d-button The springy release animation on that one would drive me crazy.
autoexec 4y ago
It's really great that unlike Jam3, your site and the first example still work perfectly fine without javascript enabled! It's amazing how many people will spend a lot of time on little details and animations while neglecting to make sure the site degrades gracefully and is still useful without a bunch of remotely hosted JS.
- Wowfunhappy 4y ago
  I actually spent a significant amount of time making my site work without Javascript. My noscript.css is only ten lines, but it adds an extra pathway into the code. I've broken several times while making other changes, and it took a while to fix. It's easy to make motherfuckingwebsite.com work without Javascript, but start adding fanciness and it becomes difficult quickly. I do it anyway because it's my personal site, and so I set out with certain rules for myself. In addition to working without Javascript in modern browsers, my site also supports IE 11 and Safari 6 (when Javascript is enabled). There is no build system, and all the code is handwritten (with a handful of very tiny third-party libraries like Waypoints). Philosophically, I believe this is the right way to make a website. Realistically, I would never do any of it on a professional project. No one ever actually sees it. (I'd like to make a distinction between support for unusually-configured software and support for weak hardware. I think it's broadly unethical to ignore performance because you're lucky enough to afford a fast computer. Manufacturing chips is bad for the planet, and the new ones might as well be no faster than the old ones if the code is going to be slower.)
bbx 4y ago
You might enjoy my sun/moon icon then :-) https://jgthms.com/ https://jgthms.com/
- Wowfunhappy 4y ago
  I don’t know why, but I wish this rotated clockwise for both sun → moon and moon → sun. The fact that it’s a wheel, but switches direction, is deeply unsatisfying to me for some reason.
  - allenu 4y ago
    I agree. It might be because having it go clockwise would make the sun appear to be setting? I do agree with the other point about having the wheel just go in one direction as well.
  - elil17 4y ago
    Yes, I agree. That would give it the sense of time as opposed to having it just feel like a toggle.
  - bbx 4y ago
    I never thought about that. Let me fix it.
- al_borland 4y ago
  The drop shadow treating the mouse cursor as the light source on the Work page is really cool.
- malshe 4y ago
  Fantastic!
countmora 4y ago
The tile animation on your website is also really well done!
deergomoo 4y ago
The red button shows how important depth is for UI controls. There would never be any doubt that it’s an interactive element. I wish the flat design trend we’re only now starting to drag ourselves out of only extended to materials. I’ve no problem with getting rid of the OS X Aqua/Windows Aero-style gloss that was everywhere and starting to look dated, but we lost a ton of usability by making interactive elements indistinguishable from labels.
- robocat 4y ago
  The red button is also lacking some really subtle queues if the press is cancelled. On mobile, touch the button and drag-scroll, and the button should not remain down. On desktop, ctrl-click and the button should not press, or click down on your mouse and press [ESC], and the button should cancel (I think - I am not on my desktop). Most controls have a bunch of really subtle and unobvious platform dependant behaviour. Often control replacements/skins lose subtle behaviours. In my opinion the timing of a very quick tap on the button feels off on my iPad - although I’m unsure if that could be improved with CSS or JavaScript.
lostlogin 4y ago
> https://citymapper.com/ https://citymapper.com/ That is a neat button. Some combination of taps on the green one next to it (might be a double tap on the green) and taps on the hamburger break the hamburger in iOS. I guess that the price for having a fun button.
easrng 4y ago
Try https://shapeshifter.design/ https://shapeshifter.design/, it's good for making icons morph like dark/light and hamburger/close.
malshe 4y ago
I love these examples! My favorite is the Citymapper’s hamburger icon
lwansbrough 4y ago
Riot Games' old website had a super satisfying hover effect for their menu button (top left -- you'll have to close the Wayback machine bar with the close icon top right) https://web.archive.org/web/20210301032806/https://riotgames.com/en https://web.archive.org/web/20210301032806/https://riotgames...
- CreepGin 4y ago
  Very nice example of texture animation driven by css transitions. I'm a game dev. After Unity began to support css transitions, I found myself doing more and more flipbook stuff to really give existing UI elements that extra punch. A recent example: https://vimeo.com/718225603 https://vimeo.com/718225603
- Wowfunhappy 4y ago
  This one is great! I just wish there were a handful more animation frames, it's a tad choppy. Heads up, you can add `if_` after the date in a web archive link to show it without the header. I.e. https://web.archive.org/web/20210301032806if_/https://riotgames.com/en https://web.archive.org/web/20210301032806if_/https://riotga...
  - HWR_14 4y ago
    Neat tip, thanks!
- exclipy 4y ago
  Why does the hover effect not happen if I hover the ▼ part of the button though? It makes it seem like icon and the ▼ do different things.
SLWW 4y ago
I pushed that red button way too many times; bookmarking it so I can just not read and click a button that does nothing.
mosselman 4y ago
That first article is great! Thanks for sharing. I am on mobile so I haven’t been able to see the hover articles yet.

Doxin 4y ago

You might be interested in checking out the playdate[0]. It's a handheld game console that's absolutely chock full of these sorts of things and it's absolutely delightful. For example to unlock it you need to press the unlock button twice. If you press it once one eye opens, if you press it twice both eyes open and the thing unlocks. If you press once and wait a bit a thought bubble pops up telling you you need to press it twice.

qbit42 4y ago

The sun/moon button is unreasonably satisfying!

asadlionpk 4y ago
Is it due to the sound it makes?
- Wowfunhappy 4y ago
  The sound is a huge piece, but it wouldn't be as good without the visuals, they go together!
- frosted-flakes 4y ago
  The sound is unreasonably irritating. Basic actions like clicking should not play sounds out of my speakers.

bombcar 4y ago

The hamburglar icon is a perfect example - the whimsey happens after the action is performed (arguably the menu should appear immediately instead of pop out, but it's pretty quick) instead of delaying the action until the animation completes.

jolmg 4y ago
> arguably the menu should appear immediately I like that the rotation makes it seem like a rack and pinion mechanism, moving the menu in and out. https://en.wikipedia.org/wiki/Rack_and_pinion https://en.wikipedia.org/wiki/Rack_and_pinion The double bounce at the end seems like a needless delay, though. Access to the menu would be quicker without it.
- deleted 4y ago
  [deleted]
chrismorgan 4y ago
It’s pretty slow. The movement in isn’t too slow (though it’d be better faster), but I find the little bounce at the end to be slow and disconcerting (that’s not the way a physical spring would go). I’d be inclined to almost double the speed, halve the bounce and speed it up even more. More interesting is something exposed in the dev tools. I managed to die.
- Wowfunhappy 4y ago
  Yeah, I think that bounce at the end could use a bit of tightening up. I would have made it quicker but with less horizontal movement, so it feels more elastic.
layer8 4y ago
The animation is highly distracting. It draws the attention to the button instead of to the menu the user now wants to use. The animation creates a “wow” effect on first use, but that’s exactly the kind of visual affordance you don’t want on a UI element for routine use.

hetspookjee 4y ago

What a great list. Please share more if you have any! Just started since recently with tailwind and there’s an entire world opening up.

Wowfunhappy 4y ago
One more I initially resisted sharing because I worked on it: https://2019-annual-report.fnih.org/ https://2019-annual-report.fnih.org/ The hover states on "Understanding", "Breakthroughs", "Solutions". There's no framework involved by the way, it's just some CSS transforms. :)

agumonkey 4y ago

very reminiscent of 2future flash designer

CTmystery 4y ago

To each their own. I find the hover states on the jam3 site unintuitive, like the clickable area is moving out from under me, forcing me to track it before perfoming the actual click. Reminds me of a flash ad where the target moves as your mouse gets closer.

rr888 4y ago
hover sucks for touchscreens
- Wowfunhappy 4y ago
  It's an optional little rollover animation. So what if it doesn't play on a touch screen?
bavila 4y ago
The way the button text moves on hover is also distracting and annoying.
- srik 4y ago
  Yep that hover animation alters user perception of it's fundamental state, from a button to link. Not saying experimentation is bad, but in general that kind of incongruence is a big no-no for production UX.
secondcoming 4y ago
And they won’t let you into their page unless your device is in portrait mode

nomilk 4y ago

Paul Graham's essay on design says good design is slightly humorous. I find the red button slightly funny, yet have no idea why.

talos2110 4y ago
It’s because the animation timing and easing, methinks. Look here for basics https://youtu.be/c7HXLl8YREM https://youtu.be/c7HXLl8YREM
Wowfunhappy 4y ago
The citymapper hamburger icon definitely has a humorous element too! I'm not sure I agree with the quote though. It so happens that the websites I linked all had an element of playfulness, but I don't think that's required. Here's a site I worked on. Check out the hover animation for the four tiles underneath "Our Innovative and Customer-Driven Businesses": https://web.archive.org/web/20190610202159if_/http://2018ar.utc.com/ https://web.archive.org/web/20190610202159if_/http://2018ar.... IMO, there's nothing playful or "humorous" about this animation. I would describe it instead as "elegant"—it gives the site an extra level of sophistication. Another (very small) example might be the "Apply Now" button on https://www.airforce.com/ https://www.airforce.com/
latchkey 4y ago
> Paul Graham's essay on design http://www.paulgraham.com/design.html http://www.paulgraham.com/design.html http://www.paulgraham.com/desres.html http://www.paulgraham.com/desres.html
- nomilk 4y ago
  See also: Taste for Makers: http://www.paulgraham.com/taste.html http://www.paulgraham.com/taste.html (under section 'Good design is often slightly funny')
markdown 4y ago
Graham is hardly an authority on design.

alpaca128 4y ago

Wow, the hover states in the second link are incredible. They feel "just right". > I also happen to be quite proud of the hover states on my own site Those are nice as well, though I'm not sure why the button animation is so delayed. It felt like I missed the button with the cursor until it suddenly started wiggling.

Wowfunhappy 4y ago
This might be something I need to rethink—the entire card is a link, not just the tiny button. I don't expect most users to hover for long enough to see the wiggle; it's meant to say: "alright, you've been thinking about this for a while now, come on and click already."

layer8 4y ago

> https://www.joshwcomeau.com/animation/3d-button https://www.joshwcomeau.com/animation/3d-button The springy release animation on that one would drive me crazy.

autoexec 4y ago

It's really great that unlike Jam3, your site and the first example still work perfectly fine without javascript enabled! It's amazing how many people will spend a lot of time on little details and animations while neglecting to make sure the site degrades gracefully and is still useful without a bunch of remotely hosted JS.

Wowfunhappy 4y ago
I actually spent a significant amount of time making my site work without Javascript. My noscript.css is only ten lines, but it adds an extra pathway into the code. I've broken several times while making other changes, and it took a while to fix. It's easy to make motherfuckingwebsite.com work without Javascript, but start adding fanciness and it becomes difficult quickly. I do it anyway because it's my personal site, and so I set out with certain rules for myself. In addition to working without Javascript in modern browsers, my site also supports IE 11 and Safari 6 (when Javascript is enabled). There is no build system, and all the code is handwritten (with a handful of very tiny third-party libraries like Waypoints). Philosophically, I believe this is the right way to make a website. Realistically, I would never do any of it on a professional project. No one ever actually sees it. (I'd like to make a distinction between support for unusually-configured software and support for weak hardware. I think it's broadly unethical to ignore performance because you're lucky enough to afford a fast computer. Manufacturing chips is bad for the planet, and the new ones might as well be no faster than the old ones if the code is going to be slower.)

bbx 4y ago

You might enjoy my sun/moon icon then :-) https://jgthms.com/ https://jgthms.com/

Wowfunhappy 4y ago
I don’t know why, but I wish this rotated clockwise for both sun → moon and moon → sun. The fact that it’s a wheel, but switches direction, is deeply unsatisfying to me for some reason.
- allenu 4y ago
  I agree. It might be because having it go clockwise would make the sun appear to be setting? I do agree with the other point about having the wheel just go in one direction as well.
- elil17 4y ago
  Yes, I agree. That would give it the sense of time as opposed to having it just feel like a toggle.
- bbx 4y ago
  I never thought about that. Let me fix it.
al_borland 4y ago
The drop shadow treating the mouse cursor as the light source on the Work page is really cool.
malshe 4y ago
Fantastic!

countmora 4y ago

The tile animation on your website is also really well done!

deergomoo 4y ago

The red button shows how important depth is for UI controls. There would never be any doubt that it’s an interactive element. I wish the flat design trend we’re only now starting to drag ourselves out of only extended to materials. I’ve no problem with getting rid of the OS X Aqua/Windows Aero-style gloss that was everywhere and starting to look dated, but we lost a ton of usability by making interactive elements indistinguishable from labels.

robocat 4y ago
The red button is also lacking some really subtle queues if the press is cancelled. On mobile, touch the button and drag-scroll, and the button should not remain down. On desktop, ctrl-click and the button should not press, or click down on your mouse and press [ESC], and the button should cancel (I think - I am not on my desktop). Most controls have a bunch of really subtle and unobvious platform dependant behaviour. Often control replacements/skins lose subtle behaviours. In my opinion the timing of a very quick tap on the button feels off on my iPad - although I’m unsure if that could be improved with CSS or JavaScript.

lostlogin 4y ago

> https://citymapper.com/ https://citymapper.com/ That is a neat button. Some combination of taps on the green one next to it (might be a double tap on the green) and taps on the hamburger break the hamburger in iOS. I guess that the price for having a fun button.

easrng 4y ago

Try https://shapeshifter.design/ https://shapeshifter.design/, it's good for making icons morph like dark/light and hamburger/close.

malshe 4y ago

I love these examples! My favorite is the Citymapper’s hamburger icon

lwansbrough 4y ago

Riot Games' old website had a super satisfying hover effect for their menu button (top left -- you'll have to close the Wayback machine bar with the close icon top right) https://web.archive.org/web/20210301032806/https://riotgames.com/en https://web.archive.org/web/20210301032806/https://riotgames...

CreepGin 4y ago
Very nice example of texture animation driven by css transitions. I'm a game dev. After Unity began to support css transitions, I found myself doing more and more flipbook stuff to really give existing UI elements that extra punch. A recent example: https://vimeo.com/718225603 https://vimeo.com/718225603
Wowfunhappy 4y ago
This one is great! I just wish there were a handful more animation frames, it's a tad choppy. Heads up, you can add `if_` after the date in a web archive link to show it without the header. I.e. https://web.archive.org/web/20210301032806if_/https://riotgames.com/en https://web.archive.org/web/20210301032806if_/https://riotga...
- HWR_14 4y ago
  Neat tip, thanks!
exclipy 4y ago
Why does the hover effect not happen if I hover the ▼ part of the button though? It makes it seem like icon and the ▼ do different things.

SLWW 4y ago

I pushed that red button way too many times; bookmarking it so I can just not read and click a button that does nothing.

mosselman 4y ago

That first article is great! Thanks for sharing. I am on mobile so I haven’t been able to see the hover articles yet.