My favourite animation trick: exponential smoothing (2023)

I continue to marvel at how often simple non linear tricks add some joy to interactions online. Or, in the case of colour perception are fundamental to understanding why two colours may not be perceptibly different enough to some people.

The odd thing is that humans do not always understand acceleration. Don't run away from a fire uphill, in a belief it travels as fast (semi constant) across level ground: fire accelerates up hills.

Kids rapidly learn the rate of movement across ground for a thrown ball but not always just how fast it will be moving under gravity when it smacks into your hands.

Great write up, love how much detail it goes into, and the interactive examples really help illustrate the points

I noticed halfway through this article I was just clicking away furiously. Is this a clever ruse by $MEGA_INPUT_DEV_MFG to wear out my mouse clicker quicker..?

A generalized version of this is Hooke's Law, also known as the spring function. It works well for UI animation because it maintains velocity as the target x changes, instead of stopping/restarting like an eased tween would.

it's funny, the thing that got me to understand calculus initially in class was seeing the graphs, somehow my brain immediatly "got" the difference between acceleration and movement and the shapes of those formulas... these days I think it might be a type of kinesthetic synesthesia! helps immensely since I work in animation and always had an easy time figuring out just the right math for procedural animation :)