Ease-out, never ease-in

Ease-out to enter and exit, ease-in-out to move, never ease-in.

Emil Kowalski@emilkowalski
A way to make your interface feel faster is to use `ease-out` easing for enter and exit animations. This curve accelerates at the beginning, which feels more snappy than `ease-in` which does the opposite.
Sep 22, 2025View on X ↗
Emil Kowalski@emilkowalski
The same applies to user-initiated actions. Use `ease-out` to make them feel snappy and responsive.
Jul 28, 2025View on X ↗
Emil Kowalski@emilkowalski
Made a small dialog animation improvement at Linear: Matched the previously mismatched animation duration of overlay and the dialog + swapped spring animaton for an ease-out one so it feels less abrupt.
Sep 23, 2026View on X ↗
Emil Kowalski@emilkowalski
we can reuse that same path as a track and make the numbered chips move along it with SVG's <animateMotion> element. It also uses some ease-in-out easing.
Aug 19, 2026View on X ↗

From emil-design-eng and his easing flowchart.

Same dropdown, four curves

Press Open all and watch each menu's first frame.

ease-inSluggish
ease-in
easeBuilt-in
ease
ease-outWeak
ease-out
--ease-outGood
cubic-bezier(.23,1,.32,1)
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

.menu {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.menu[data-open] { opacity: 1; transform: none; }

Where each curve spends time

Press Play or drag Time into the first 20%.

Progress over time for ease-in, ease, ease-out and the custom ease-out curve time → progress
ease-in
0%
ease
0%
ease-out
0%
--ease-out
0%
1000ms

--ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

Already on screen? Ease-in-out

Pick a step; both chips travel the same distance.

--ease-outLurches
transform 300ms var(--ease-out)
--ease-in-outGood
transform 300ms var(--ease-in-out)

.chip {
  transform: translateX(var(--x));
  transition: transform 300ms var(--ease-in-out);
}

Why it matters, pros and cons

Why it matters

Ease-out moves most in the first frames, when the user looks. Ease-in feels late.

Pros

  • Feels faster at the same duration.
  • Three tokens cover almost every case.
  • Ease-in-out keeps on-screen moves from jolting.

Cons

  • Strong ease-out's long tail can make chained steps feel late.
  • Gestures should hand velocity to a spring instead.
  • Softer curves can be a deliberate brand choice.