Easing has personality

Pick the curve by what the element does; let the brand tune it.

Jake Archibaldlinear-easing-generator.netlify.app
Use Jake Archibald's linear() generator for custom curves
ToolOpen generator ↗

From design-motion-principles, more curves: easing.dev, easings.co.

Easing lab

Pick what the element does, then press Run.

Same move, six curvesLab
ease-out
:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in:     cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
.toast[data-state="in"]  { transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out); }
.toast[data-state="out"] { transition: transform 200ms var(--ease-in),  opacity 200ms var(--ease-in); }
.spinner { animation: spin 800ms linear infinite; }

Same confirmation, two brands

Switch the curve, then press Create account.

BankWrong

Account created

Checking ••4821 is ready to use.

elastic
Kids' learning appFits

You're in!

Lesson one is unlocked.

elastic
.brand-bank { --brand-ease: var(--ease-out); }
.brand-kids { --brand-ease: var(--elastic-easing); }
.confirm {
  transition: transform 500ms var(--brand-ease), opacity 240ms var(--ease-out);
}

No bounce on error states

Press Save repeatedly in each pane.

Elastic shakeBad

linear(elastic)0
Calm ease-outGood

200ms var(--ease-out)0

Why it matters, pros and cons

Why it matters

Ease-out lands softly; ease-in leaves. Overshoot suits kids, not money.

Pros

  • Direction picks the curve; no debate.
  • Custom curves beat the built-in ease.
  • linear() gives bounce in pure CSS.

Cons

  • Elastic and bounce add hundreds of milliseconds.
  • Playful curves wear out on repeated interactions.
  • linear() cannot keep velocity when interrupted.