motion
Easing
also called timing function (css), ease
The rate of change across an animation, deciding how it accelerates and settles rather than how long it takes.
Same distance, same duration, completely different feeling. Easing is the curve that says where the movement is on its way, and it is what makes motion read as mechanical, considered, or playful.
Three families cover almost everything. Ease-out starts fast and settles, which suits things arriving and responses to a click, because the user sees the result immediately. Ease-in starts slow and accelerates away, which suits things leaving. Ease-in-out is for movement that both starts and ends on screen. Linear reads as machinery and should be reserved for things that genuinely are, like a progress bar or a marquee.
Overshoot curves, the ones that pass the target and come back, are borrowed physics. They are excellent once, on something meant to be noticed, and grating on anything a person does forty times a day. When motion feels wrong, reach for the curve before the duration: most animations that feel sluggish are ease-in-out when they should be ease-out.
Which word?
| If you want | say |
|---|---|
| the shape of a motion over its duration, not its length | easing |
| how long a motion lasts, not its shape | duration |
| motion should react to how it was interrupted, not a timer | spring animation |
| an easing has to be written down exactly | cubic bezier |
Related
See also: Stagger · View transition · Asymmetric easing
Implementations
Specimens illustrate the concept; for production use, start here.
| material | Easing and duration |