Pick easing by the job

Ease-out to enter, ease-in-out to move, linear for loops; never ease-in.

Emil Kowalskiemilkowal.ski
Distilled from Emil Kowalski's design engineering philosophy (emilkowal.ski).
emilkowal.skiVisit site ↗
improve-animationsAUDIT.md · Easing & duration
ease-in on UI is always a finding — it starts slow, delaying the exact moment the user is watching.
Severity: HIGHSkill rule catalog

From improve-animations and find-animation-opportunities.

Same menu, three curves

Open all three and watch the first quarter.

ease-inFinding

¼ time: 9%

transition: … 200ms ease-in
ease-outWeak

¼ time: 38%

transition: … 200ms ease-out
--ease-outGood

¼ time: 78%

cubic-bezier(0.23, 1, 0.32, 1)
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

.menu {
  transform-origin: top left;
  transition: opacity 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}
.menu[data-state="closed"] { opacity: 0; transform: translateY(-4px) scale(0.96); }

Pick the job

Pick a job, try the example, then tick ease-in.

Entering or exitingGood
250ms var(--ease-out)
Curvevar(--ease-out)

Pass

Drawer, frame by frame

Drag the slider to compare both drawers at one instant.

Built-in ease-in-outWeak

Open: 13%

cubic-bezier(0.42, 0, 0.58, 1)
--ease-drawerGood

Open: 78%

cubic-bezier(0.32, 0.72, 0, 1)
:root { --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); }

.sheet {
  transform: translateY(100%);
  transition: transform 300ms var(--ease-drawer);
}
.sheet[data-open] { transform: translateY(0); }

Why it matters, pros and cons

Why it matters

The eye lands the instant motion starts, when ease-in barely moves.

Pros

  • Same duration, feels faster.
  • Auditable: grep ease-in, flag every hit.
  • Three tokens cover nearly every case.

Cons

  • Strong ease-out has a long tail before transitionend.
  • Deliberate wind-ups outside UI chrome can use ease-in.
  • Gestures need springs that carry velocity, not fixed curves.