The science of easing in motion design
A practical guide to easing in UI and motion design: what the most common curves communicate, what emotion they convey, what real-world movements they resemble and why even …
Easing isn't decoration: it's how motion communicates intent. A linear lerp says 'I'm a machine'; a cubic-bezier(.83, 0, .17, 1) says 'I'm a physical object with mass'. The entire emotional hierarchy of an animation lives in its curve.
The most common curves — ease-in-out, ease-out-cubic, ease-in-back — mimic real-world movement: a lift that starts and brakes, a falling ball, a drawer that bounces when it closes. If your animation feels artificial, it's usually because the curve doesn't match the physical metaphor.
Elasticity is another story. Back, elastic and bounce easings introduce overshoot — the animation goes past and comes back. That's exactly what an object with momentum does, and what our brains read as 'alive'. It's why UIs like iOS or Linear feel organic: they let things overshoot briefly.
The most common mistake is applying the same curve to everything. A page full of ease-in-out feels flat. The rule of thumb: use ease-out for entrances (something appears, decelerating), ease-in for exits (something accelerates off-screen), and ease-in-out only for mid-page state changes, not for appearances.
And finally: timing. A beautiful curve with an 800ms duration feels slow; the same one at 320ms feels premium. Motion design is 50% curve, 50% duration. The intuition is built by watching a lot and measuring in milliseconds.
Work with JMWEB
Let's build something with personality.
It all starts with a conversation. Bring a brief, a reference, a half-baked idea — I'll take it from there.
Start a project
