Easing Is Emotion

Animation curves are the tone of voice of an interface. A modal that decelerates early (ease-out) arrives like someone entering a room and lowering their voice. The same modal on a symmetric ease glides in like it owns the place. Users can't articulate the difference, but they absolutely register it — ask them which app feels 'more arrogant' and watch the consensus form.

easing-explorer

Play with the explorer above: the same 300ms translation under different curves. Ease-out reads as deference — the interface does its work early and settles before your eye arrives. Ease-in reads as hesitation. Spring overshoot reads as enthusiasm, charming at 4px of overshoot and clownish at 20.

A vocabulary, not a preference

I keep a small easing vocabulary per project — arrival, departure, attention, physics — each with one named curve. Consistency here is what makes motion feel like one personality rather than a committee. The fastest way to make a polished app feel cheap is to let every component bring its own bezier.

export const MOTION = {
  arrival:  'cubic-bezier(0.16, 1, 0.3, 1)',   // settles early, polite
  departure:'cubic-bezier(0.7, 0, 0.84, 0)',   // commits, doesn't linger
  attention:'cubic-bezier(0.34, 1.56, 0.64, 1)',// 6% overshoot, warm
} as const;

Duration is how long a motion takes. Easing is how it feels about taking that long.