I've used this for decades. The sweet spot for ui components seems to be moving 90% of the way to the target every 80 milliseconds.
i.e ease-in
that's ease-out
My favourite animation trick: exponential smoothing (2023)
41–50 of 390 posts
Re: My favourite animation trick: exponential smoothing (2023)
#42Can this be done in pure CSS?
`transition-timing-function: ease-in-out`
This reminds me of Medium spending months to change the underline beneath a descender: https://medium.design/crafting-link-underlines-on-medium-7c0...
Re: My favourite animation trick: exponential smoothing (2023)
#43> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why…
Computer UIs need animations for the same reason they need shadows, gradients, and momentum: because these are aspects of the physical world that we already know how to interpert, so can be used "for free" to aid our understanding of the UI. Not using animations would likely be more taxing on our visual processing because nothing in the world moves discontinuously, so that would be a new thing to learn when using a computer. The primary reasons not to use an animation should be technical: you can't have it run in a short enough time and still look good, not drop frames, conserve battery life, etc.
Re: My favourite animation trick: exponential smoothing (2023)
#44Can this be done in pure CSS?
Can probably try playing around with cubic-bezier, but not too sure.
Re: My favourite animation trick: exponential smoothing (2023)
#45[deleted]
Re: My favourite animation trick: exponential smoothing (2023)
#46> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why…
Animation should enhance and enrich the UI, not make it "look fancy". Apple gets this perfectly. The squeeze animation on iOS's volume bar is a great example. Providing feedback to the user in response to an action, in a manner that is expected and makes sense, can massively increase UX.
Exactly, to the OP of parent comment, this talk is a great overview of exactly this point: https://developer.apple.com/videos/play/wwdc2018/803
Re: My favourite animation trick: exponential smoothing (2023)
#47> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why…
Here's one practical benefit: the UI should make it obvious that your click did successfully register, and an animation does that because it's eye-catching. But the other side of the coin is that, because it is eye-catching, animation can be distracting or annoying. Adding animation to your UI is like adding salt to your cooking: it's going to be pretty bland without it, but you can also ruin things by going overboar…
Most people that complain about these things don't even realize how much of it is integrated into their daily lives and workflows because it's too natural to notice. You don't need experience to see when someone's done a shitty job, though; just like any other tool, inexperienced people often see poor outcomes as an indictment of a technique, tool, or approach when the practitioner is to blame.
Re: My favourite animation trick: exponential smoothing (2023)
#48> Animations are not just a fancy visual thing, they help the user understand what’s going on. Instead of teleporting the toggle indicator to its new position, let’s move it smoothly Unfortunately it is, just a fancy thing that too often makes it worse or just focuses on the wrong thing. Like in this case, what exactly is "going on" that requires this visual delay? It looks worse vs the original instant response, why…
Here's one practical benefit: the UI should make it obvious that your click did successfully register, and an animation does that because it's eye-catching. But the other side of the coin is that, because it is eye-catching, animation can be distracting or annoying. Adding animation to your UI is like adding salt to your cooking: it's going to be pretty bland without it, but you can also ruin things by going overboar…
Great UI goal, though what's catching is the change in visual state and colors, which also happens without extra animation, or you can add an extra highlight of the changed item to emphasize the change if state, so this doesn't address the specific issue
Re: My favourite animation trick: exponential smoothing (2023)
#49This is very cool, the camera over world example really highlights the difference
Re: My favourite animation trick: exponential smoothing (2023)
#50It's fascinating that easing, which is what this article mostly boils down to, is something that each new generation seems to need to (re)discover on their own.
I remember being fascinated by Yugo Nakamura's experimental websites back in the late 90s because they were some of the first that I'd seen that had an organic feel due to liberal use of easing. https://www.youtube.com/watch?v=NLt7Gwnt3WY