Easing in animation: ease in, ease out and curves

Real objects have mass. A car does not reach cruising speed the instant it moves, and a door does not stop dead at the frame. Motion that starts and stops at full speed reads as mechanical, weightless or computer-generated, even when the audience cannot say why.

Disney's animators named this principle slow in and slow out — one of the twelve principles of animation set out in The Illusion of Life. More drawings near the start and end of a move and fewer in the middle make it accelerate and decelerate. In 3D software the same effect comes from the curve between keys rather than from extra drawings.

This is the most common source of confusion, and it is not your fault. In CSS and in Robert Penner's widely copied easing functions, ease-in means the motion starts slowly and speeds up, and ease-out means it starts fast and slows to a stop. The curve belongs to the whole move between two keys.

In After Effects and many key-based tools, easing belongs to a key instead: easing into a key means slowing down as the motion arrives at it, and easing out of a key means starting slowly as the motion leaves it. So an After Effects ease in on the last key and a CSS ease-out on the move produce the same deceleration under opposite names. Describing the motion — slow start, slow finish, slow at both ends — avoids the ambiguity.

Linear interpolation draws a straight line between keys: constant speed and an abrupt change at every key. Constant, stepped or hold interpolation keeps the value until the next key and then jumps, which is useful for blocking, blinks and anything that should snap. Bezier or spline interpolation draws a smooth curve through the keys, and is where easing lives.

A bezier key has two handles, one controlling the curve arriving at the key and one controlling it leaving. A flat handle means zero speed at the key — an ease. A longer handle holds that slowness for more of the move. Handles in line pass through the key smoothly; handles broken apart create a sharp change of direction, like a bounce. Pull a handle so the curve overshoots the key's value and the motion goes past its target and settles back.

Penner's easing equations, published in the early 2000s, became the shared vocabulary for named curves: sine, quad, cubic, quart, quint, expo and circ, each in an in, out and in-out form, running from barely-there (sine) to violent (expo). Back overshoots its target before settling. Most motion tools and CSS libraries ship some version of the set, usually approximated as cubic bezier curves.

Elastic and bounce are the exceptions. They oscillate several times within one move, which a single cubic bezier cannot do, so tools either build them from several keys or generate them procedurally.

Ease both ends for most moves that start and stop: a camera push, an object sliding into place, a head turn. Use a slow finish for things arriving and settling, and a slow start for things launching. Keep linear for motion that is meant to be constant — a spinning fan, a conveyor, the middle of a looping cycle — and for keys the motion should pass straight through. Use hold for snaps, blinks and blocking.

Select a key and the timeline header offers Linear, Ease in, Ease out, Ease and Hold. They follow the key-based convention: Ease in slows the motion arriving at the key, Ease out slows it leaving, and Ease does both — After Effects' Easy Ease. With the timeline focused, F9 applies Ease, ⇧F9 Ease in and ⌘⇧F9 Ease out.

Curve… opens Penner's families from Sine to Back, searchable by feel as well as name, alongside any curves you have saved. Curves mode draws the tracks as curves with bezier handles you drag directly, overshoot included. Elastic and bounce are deliberately not in the curve list; the spring and bounce generators under + Motion produce that kind of motion instead.