Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

My favourite animation trick: exponential smoothing (2023)

lisyarus.github.io

Post reply on HN
Print view View original

281–290 of 390 posts

Re: My favourite animation trick: exponential smoothing (2023)

#281

Post by wpm »

dig1 wrote: post #270

I don't want to be a party breaker, and the article is nicely written, but why are these animations pervasive these days? When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. UI is becoming an art, but most people use computers to get their jobs done. And, to be honest, I still prefer c…

As the article says, and it seems like what a lot of designers feel as well: “Adding some animation to it would be cool!”

I’m with you though. Most animation in UI is superfluous and annoying, if not down right rage inducing (like when the animation blocks input).

A good example of an animation that I don’t dislike is the window minimize animation on macOS where the window gets “sucked” into the Dock. It’s useful because it relates a “where” that I can keep in my head. I click a button, where’d my window go? Down there, I just saw it get sucked down into the Dock.

Re: My favourite animation trick: exponential smoothing (2023)

#282

Post by bayindirh »

dig1 wrote: post #270

I don't want to be a party breaker, and the article is nicely written, but why are these animations pervasive these days? When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. UI is becoming an art, but most people use computers to get their jobs done. And, to be honest, I still prefer c…

> I click a button in the real world, it changes the state instantaneously.

Actually it does not. Flick switches have travel, click buttons have depth. Electronic buttons have lag, bigger systems have startup time (hence the blinkenlights).

My dishwasher starts in ~3 seconds after I press start. The button travel is so much that I'm never sure whether it registered the press or not until I hear the water pump start pulling water from the pipe.

> It gives me an instantaneous feedback.

It's just because you're touching a button, and feeling the pressure on your fingertip. Nothing is in an "instant" in the world.

Re: My favourite animation trick: exponential smoothing (2023)

#283

Post by itishappy »

dig1 wrote: post #270

I don't want to be a party breaker, and the article is nicely written, but why are these animations pervasive these days? When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. UI is becoming an art, but most people use computers to get their jobs done. And, to be honest, I still prefer c…

> When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up.

Physical buttons have measurable response times, along with momentum and bounce. They're pretty quick, but get more noticeable as things get bigger.

https://en.wikipedia.org/wiki/Switch#Contact_bounce

The technique becomes even more powerful with additional degrees of freedom, like when moving the map from the article. It feels a lot better to have your view animate smoothly than jump around discontinuously.

Re: My favourite animation trick: exponential smoothing (2023)

#284

Post by bayindirh »

wpm wrote: post #281
dig1 wrote: post #270

I don't want to be a party breaker, and the article is nicely written, but why are these animations pervasive these days? When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. UI is becoming an art, but most people use computers to get their jobs done. And, to be honest, I still prefer c…

As the article says, and it seems like what a lot of designers feel as well: “Adding some animation to it would be cool!” I’m with you though. Most animation in UI is superfluous and annoying, if not down right rage inducing (like when the animation blocks input). A good example of an animation that I don’t dislike is the window minimize animation on macOS where the window gets “sucked” into the Dock. It’s useful bec…

Also some of these sliders are tri-state. When you touch it, it moves 3/4 way, becomes washed out, meaning "making the change, please wait", and either goes all the way & becomes green, or returns to its place and shows an error.

Animations are tools. Use wisely, they inform and entertain. Use too much, they become boring.

Re: My favourite animation trick: exponential smoothing (2023)

#285

Post by mrob »

itishappy wrote: post #283
dig1 wrote: post #270

I don't want to be a party breaker, and the article is nicely written, but why are these animations pervasive these days? When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. UI is becoming an art, but most people use computers to get their jobs done. And, to be honest, I still prefer c…

> When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. Physical buttons have measurable response times, along with momentum and bounce. They're pretty quick, but get more noticeable as things get bigger. https://en.wikipedia.org/wiki/Switch#Contact_bounce The technique becomes even more…

The virtual buttons are controlled by physical buttons. My mouse button already "animates" because it physically moves when I click it (and it's optical, so no contact bounce). I don't need another animation playing after the physical movement finishes. That's just annoying time wasting.

Re: My favourite animation trick: exponential smoothing (2023)

#286

Post by itishappy »

buserror wrote: post #75

All of this work for buttons that toggle on a mouse/finger DOWN. How irritating that there is no intermediate state on the mouse DOWN and the toggle on the mouse/finger UP. Because it allows you to /cancel/ the action.. click, 'oops don't want that' drag mouse/finger out and release. No action taken. User is in control. Amazing.

It's a toy example, not a polished UI. You can trigger this technique any way you like.

Re: My favourite animation trick: exponential smoothing (2023)

#287

Post by __jonas »

ulrikrasmussen wrote: post #86

Just go with the instant toggle instead of wasting time making the UI worse by making users wait for pointless animations.

I like those little animations, you do not, that's fine because there is a simple solution for it:

Just respect prefers-reduced-motion when implementing animations and everyone is happy.

Re: My favourite animation trick: exponential smoothing (2023)

#289

Post by itishappy »

mrob wrote: post #285
itishappy wrote: post #283

Earlier quoted context omitted.

> When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. Physical buttons have measurable response times, along with momentum and bounce. They're pretty quick, but get more noticeable as things get bigger. https://en.wikipedia.org/wiki/Switch#Contact_bounce The technique becomes even more…

The virtual buttons are controlled by physical buttons. My mouse button already "animates" because it physically moves when I click it (and it's optical, so no contact bounce). I don't need another animation playing after the physical movement finishes. That's just annoying time wasting.

It's non-blocking. If those milliseconds are critical, you can be doing other stuff.

Re: My favourite animation trick: exponential smoothing (2023)

#290

Post by bmicraft »

mrob wrote: post #285
itishappy wrote: post #283

Earlier quoted context omitted.

> When I click a button in the real world, it changes the state instantaneously. It gives me an instantaneous feedback. Imagine you click the mouse button, and it slowly goes down and up. Physical buttons have measurable response times, along with momentum and bounce. They're pretty quick, but get more noticeable as things get bigger. https://en.wikipedia.org/wiki/Switch#Contact_bounce The technique becomes even more…

The virtual buttons are controlled by physical buttons. My mouse button already "animates" because it physically moves when I click it (and it's optical, so no contact bounce). I don't need another animation playing after the physical movement finishes. That's just annoying time wasting.

How is it wasting time? It's not like you have to wait for the animation to complete
Post reply on HN