Arrivals use ease-out

Ease-out puts most of the movement in the first moments.

From polaris-tokens, motion tokens. Progress figures are computed from the curves.

Same durations, two curves

Press Replay. Compare the ball and the panel.

Arrives with ease-inBad
PanelArrives with the ball

At 25% of the time: 0% of the distance

var(--p-motion-ease-in)
Arrives with ease-outGood
PanelArrives with the ball

At 25% of the time: 0% of the distance

var(--p-motion-ease-out)
--p-motion-ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
--p-motion-ease-in:     cubic-bezier(0.42, 0, 1, 1);
--p-motion-ease-out:    cubic-bezier(0.19, 0.91, 0.38, 1);
--p-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
--p-motion-linear:      cubic-bezier(0, 0, 1, 1);

.panel { animation: fade-in var(--p-motion-duration-200) var(--p-motion-ease-out); }

Why it matters, pros and cons

Why it matters

The ease-out curve (0.19, 0.91, 0.38, 1) climbs steeply at the start. The change is visible right away, then settles. Ease-in does the reverse.

Pros

  • The response shows at once, so the UI feels quick.
  • The eye lands on the final position early.
  • One named curve replaces a hand-tuned cubic-bezier.

Cons

  • Ease-in starts slowly, so an arrival feels late.
  • On a long move, a steep start can read as a jump.
  • Things that travel and stop may suit ease-in-out (our view).