Craft
Easing curves explained: why motion should never be linear
Easing controls how an animation speeds up and slows down. Learn ease-in, ease-out, ease-in-out, cubic Bézier curves and when to use each in motion design.
Easing is the single biggest lever in motion design. It describes how an object’s speed changes over the course of a move. Linear motion, constant speed from start to finish, almost never occurs in nature and looks mechanical on screen. Easing is how you make movement feel physical.
What easing is
An easing function maps time to progress. At time zero the object is at its start; at the end of the duration it is at its destination. What happens in between is the curve. A straight diagonal line is linear. A curve that starts shallow and steepens means the object starts slowly and speeds up. A curve that is steep at first and flattens means it launches quickly and settles.
Animators know this as slow in and slow out, one of the twelve principles in *The Illusion of Life* by Frank Thomas and Ollie Johnston. Objects with mass take time to get going and time to stop.
The common easings
| Name | Feel | Typical use |
|---|---|---|
| Linear | Constant speed, mechanical | Continuous loops, progress bars, rotations that should not accelerate |
| Ease-in | Starts slow, ends fast | Elements leaving the screen |
| Ease-out | Starts fast, ends slow | Elements arriving on screen |
| Ease-in-out | Slow, fast, slow | Elements moving from one position to another on screen |
A good default: use ease-out for things that arrive, ease-in for things that leave, and ease-in-out for things that move between two points that both stay visible.
Cubic Bézier curves
Most easing is defined as a cubic Bézier curve with two control points. In CSS, cubic-bezier(x1, y1, x2, y2) takes the coordinates of those points. The standard keywords are shortcuts: ease-in is cubic-bezier(0.42, 0, 1, 1), ease-out is cubic-bezier(0, 0, 0.58, 1), and ease-in-out is cubic-bezier(0.42, 0, 0.58, 1). The default ease is cubic-bezier(0.25, 0.1, 0.25, 1).
You are not limited to the keywords. A sharper ease-out, with a steep start and a long gentle landing, often feels more polished than the default. Pulling the control points further out exaggerates the effect.
Beyond Bézier: springs, overshoot and bounce
Some easings go past the target and return, called overshoot, or oscillate before settling, as in springs and bounces. Robert Penner popularized a family of such functions in the early 2000s, and they are still the reference many libraries follow. Use them sparingly: a small overshoot adds life, a big bounce can feel childish for a serious brand.
Duration matters as much as the curve
- Short moves, such as small labels and icons, can be quick.
- Large moves and full-screen changes need more time to read.
- Enter slower than you exit; viewers need time to see what arrived.
- In a short social video, keep moves snappy, but never so fast that text cannot be read.
Easing in practice
- Replace every linear move with an ease unless you have a reason.
- Match easing to meaning: arrivals ease out, departures ease in.
- Combine with anticipation and overlap so elements prepare, stagger and settle.
- Stay consistent. A film that uses the same family of curves throughout feels designed.
MotionMaker applies a consistent easing personality across a whole film, drawn once per video, so every move shares the same character. To see easing at work, try a website to video conversion, or read the broader guide to motion design.