Easing

The least effortful way to move something on screen is to keep the speed identical from start to finish. Movement built that way looks like a machine pushing an object along. Real objects ease into motion and settle out of it, and a constant-speed movement has neither a beginning nor an end to it.

Noa once built a drawer's slide-in two ways and showed them side by side at Pagedeck. One ran at constant speed; the other started fast and came to a slow stop. All five participants called the second one faster, and both had been given the same amount of time. The curve, not the number, produced the sense of speed.

Easing is the value that shapes speed within a duration, separately from the duration itself. How long a thing moves and how it moves get written down as two different decisions.

Treat the given time as the full span and describe, as a curve, where within it the movement is fast and where it is slow. In practice a few named curves get reused.

1. Things entering the screen use ease-out. It starts fast and stops slowly, so the arrival feels immediate while the landing stays soft.
2. Things leaving the screen use ease-in. Slow to start, quick to vanish. There's no reason to hold on to something the user is done with.
3. Things moving from one position to another on screen use ease-in-out. Both ends are soft, which keeps the travel itself visible.
4. Constant-speed linear is for mechanical movement only, like a progress indicator or a continuously spinning marker. It doesn't go on elements people touch.
5. Don't grow the set of curves. Fixing three and writing down which goes where keeps the product's overall feel consistent. Three covers nearly every place motion appears.

There's also a way to describe movement with physical values like weight and stiffness instead of a time and a curve. Spring animation is that approach, and it fits places where the target changes mid-flight, such as releasing a card being dragged.

"This runs at constant speed, so it looks like a machine pushing it. Switch it to the entering curve."

The same duration leaves a different impression once the curve changes.

"Opening and closing use the same curve. Closing should use the exit curve."

The curve splits by direction.

"Don't invent a new curve. Pick one of the three we settled on."

Asking not to grow the set of values.

Noa wrote down the three curves and where each one applies, and Theo used those names directly in the implementation. Hand-entered numbers per screen disappeared, and people on the team started saying things felt faster than before at the same durations.