Choosing an Easing

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

ease-out

Fast at the start and slow at the end. For things that arrive.

ease-in

Slow at the start and fast at the end. For things that leave.

ease-in-out

Slow at both ends. For things that move between two places that are both on screen.

token

A named value kept in one place (here a CSS custom property such as --ease-out) so every component uses the same one.

responsiveness

How soon after an action the interface visibly reacts. A strong ease-out gets visible movement earlier in the same duration.

1. 1

   Swap the enter curve

   In "Four jobs, four curves" change the .go .enter rule's two var(--ease-out) to var(--ease-in). Press the button, pause, step to 60 ms: enter is at only 2.3 px of 60 and 4% opaque, against 47.9 px and 80% before. The same 220 ms now looks stuck at the start.

2. 2

   Make the move linear

   Change the .go .move easing to linear and compare at 110 ms: move is now at 44 px (110/400 of 160) instead of 14.4 px, and it starts and stops abruptly. Switch back to var(--ease-in-out) for the real thing.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: a team with no rule picks curves by mood. One card uses ease, another linear, a third a copied cubic-bezier from a blog. The page feels inconsistent and nobody can say why. A rule that maps job to curve makes every motion feel like it came from the same hand.

2. 2

   Arriving: ease-out. Something that enters the screen, or appears after a click, should be quick at the start and settle at the end. It answers the click at once (the user sees movement within the first frame or two) and lands softly. Lumen's --ease-out is cubic-bezier(0.22, 1, 0.36, 1): 76% of the move is done after a quarter of the time. A menu that opens with ease-in does the opposite: for the first 60 ms of 220 it has moved only 4% of its way.

3. 3

   Leaving: ease-in. Something that exits starts slowly, and speeds up as it goes, like a bus pulling away. The slow start costs a little responsiveness, so exits must be short: Lumen's --ease-in runs for --dur-fast (120 ms). At 60 ms of 120 the element has faded only 13.5%, and by 110 ms it has faded 60%.

4. 4

   Moving between two places on screen: ease-in-out. An element that is already visible and goes from one position to another (a card sliding to a new slot, a slider thumb) accelerates and decelerates. The symmetrical curve --ease-in-out is cubic-bezier(0.65, 0, 0.35, 1); it is flatter at both ends than the keyword ease-in-out (at a tenth of the time it has moved 0.9% of the way, against 2%).

5. 5

   Endless motion: linear. A spinner, a progress bar that follows real progress, a marquee: if the motion is continuous and each turn begins where the last ended, any easing makes it speed up and slow down at every lap. Use linear. Endless motion needs a way to stop (Topic 7.4) and a calm version for reduced motion.

6. 6

   Use strong curves, and short durations. The built-in ease-out reaches 90% of its move at 74% of the time; Lumen's token reaches 90% at 37%. At a quarter of the time the built-in curve has moved 38% of the way and the token 76%. Product interfaces favour strong ease-out with short durations (150–300 ms); decorative or brand moments (a hero) may use slower, softer curves.

• You can map arriving, leaving, moving and looping to a curve

• You can say why Lumen's ease-out feels faster than the keyword, with numbers

• You can name two mistakes: ease-in on an entrance, linear on a dialog

• You can name the tokens for each job