What does mass, stiffness, and damping really mean?
Imagine you're holding a ball. Mass is how heavy the ball feels in your hand.
Now imagine you have attached that ball to a spring and pulled it down. Stiffness is how strongly the spring tries to pull the ball back to where it started.
Damping is like friction. It decides how much bounce the spring loses over time. Zero damping means the spring never stops springing.
The spring motion always depends on how mass, stiffness, and damping work together. It’s the mix that decides whether an animation feels playful, snappy, smooth or heavy.
What makes a spring animation tasteful?
A tasteful spring animation respects a user’s time. It feels quick but never rushed. As a rule of thumb, keep most of your spring animations within 150–350ms. Few exceptions apply, however no spring animation (or any UI animation) should be over 700ms. It makes your interface feel slow.
Bounce should match the physical weight of what’s moving. Too much bounce feels cartoonish, like the interface is made of jelly (unless you want your brand's tone to convey that). Sometimes the best spring animations are the ones with no bounce.
High velocity can make an element feel snappy and intentional, but if not done well, it comes across as erratic. Even if the bounce is small, a high velocity can make the animation feel aggressive or out of control. Lower velocity is smoother, but again, risks feeling sluggish if not done well.
Even if a spring animation looks done, it might still be technically in motion. A well-tuned spring animation feels complete at the right moment which is usually when the user no longer needs to pay attention to it.
Not all spring animations should be created equally. A tooltip animation should feel different from a modal animation. A tasteful spring animation matches the context of the element being animated. It takes into account its size, purpose, and weight.