Most interface animation is specified in milliseconds. A panel slides in over 300ms with an ease-out curve, a button scales for 150ms, and everyone moves on. It works, mostly. But the moment a user interrupts an animation halfway through, the illusion falls apart, which is why I have been rebuilding the motion in Circular Motion Studio around springs instead.

A spring has no duration. It has stiffness, damping and mass, and it settles when it settles. That sounds less predictable, and it is, in exactly the way real objects are.

Why durations feel wrong

A fixed duration assumes the animation always starts from rest and always travels the same distance. Interfaces rarely cooperate.

Tuning stiffness and damping

After a lot of trial and error, I use three presets for almost everything:

• Snappy, for small controls like toggles and checkboxes
• Gentle, for panels, sheets and anything that covers content
• Loose, reserved for playful moments where a little overshoot reads as personality

None of this requires a physics engine. The hard part is resisting the urge to specify how long something should take.