Easing cheatsheet, deep dive

The eight curves and their personalities

Every named ease is a personality, and personalities have jobs. Linear is a metronome: no accent, no lies, useful only for continuous loops and marquees. ease-in starts slow and lands fast — it reads as something falling or being dismissed. ease-out starts fast and lands slow — it reads as something arriving and settling. ease-in-out splits the difference and is the safest default for anything that both enters and exits.

The problem with the CSS keywords is that they are fixed. ease-in-out's actual curve is gentle, but for UI it is usually too slow in the middle and not decisive enough at the ends. That is why every serious motion system ends up with bespoke beziers named after their job, not their shape.

Entrances settle, exits commit

Read that line twice, because it is the entire cheatsheet in six words. An entrance should feel like a thing arriving and settling into its layout position — so it accelerates early (the eye catches it) and decelerates at the end (the eye can follow it to rest). An exit should feel decided — it commits and leaves, so it accelerates out and never slows down halfway out of the door.

Swap the two and the UI feels wrong in a way users describe as 'laggy' or 'jumpy' without ever naming the curve.

.ease-entrance { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.ease-exit     { transition: opacity .3s cubic-bezier(.55, 0, 1, .45); }
/* entrance: arrives and settles · exit: decides and leaves */

The full table, with jobs

• linear — loops only: spinners, marquees, indeterminate progress. Anywhere motion must never imply arrival.
• ease-in (accelerate) — dismissal. Modals leaving, alerts collapsing. Short durations only; long ease-in feels like waiting.
• ease-out (decelerate) — arrival. Cards entering, dropdowns opening, toasts arriving. The workhorse keyword when you cannot write a bezier.
• ease-in-out — reversible UI: accordions, theme toggles, hover that must feel symmetrical. Never use it for a one-way entrance; you are paying for a middle you do not need.
• ease-out-quart / expo-style out — the 'premium' entrance. Big motion, hero reveals, full-bleed panels. Overused it becomes exhausting — reserve for moments that should feel expensive.
• springs — see the companion essay: springs are physics, not curves; use them for drag, toss, and anything under a finger.

Why durations and curves must be tuned together

A curve without a duration is half a sentence. The same cubic-bezier(.16, 1, .3, 1) reads as 'snappy' at 240ms, 'confident' at 450ms, and 'slow' at 700ms. Motif's audit rule: entrances for small elements 150–250ms, panels and modals 300–500ms, hero-scale moments 600–900ms. If you must pick one mistake to fix first, it is the 500ms entrance on a 40px tooltip — the duration is telling a bigger story than the element.

Element mass        Duration        Curve
-----------------  ------------    ----------------------------
tooltip, badge     120-160ms       ease-out
card, dropdown     180-260ms       cubic-bezier(.16, 1, .3, 1)
modal, sheet       300-450ms       cubic-bezier(.16, 1, .3, 1)
hero reveal        600-900ms       cubic-bezier(.16, 1, .3, 1)
dismissal (any)    150-300ms       cubic-bezier(.55, 0, 1, .45)
loop               600-1400ms      linear (opacity pulse)

The audit pass

Open any Motif component page and look at its entrance with the Easing Lab open beside it. Feel the curve, then drag the lab's handles to the keyword default and feel the difference. That comparison — bespoke settle vs. CSS keyword — is the entire argument for owning your curves instead of borrowing the browser's.

And when you copy an ease from a library, copy the *intent*: note what job the motion is doing (arrive, dismiss, loop, follow), then pick your own curve for that job. Easing is a language; the cheatsheet just gives you the words.