01 Taste: timing & easing

Timing is how long

Every move has a duration, and the right one depends on how far the thing travels and how big it is. Small interface feedback lands in 100 to 200 ms. Panels and page elements take 200 to 400 ms. Anything slower starts to feel like waiting.

In video, think in frames instead of milliseconds. At 30 frames per second, half a second is 15 frames, and a one-frame difference is visible. The holds between moves matter as much as the moves: give the eye time to read what just arrived.

Easing is how it moves

Nothing in the real world starts or stops instantly, so motion with constant speed looks mechanical. An easing curve maps time to progress. Where the curve is steep, the object moves fast; where it is flat, it barely moves.

Use ease-out for things entering (they arrive fast and settle), ease-in for things leaving, and ease-in-out for things moving from one place on screen to another. Keep linear for loaders, spinners and anything that should feel continuous.

Easing playground

Drag the two red handles to shape the curve. The horizontal axis is time, the vertical axis is progress. Watch the box, then read the code it produces.

cubic-bezier(0.16, 1, 0.3, 1)

Arrow keys move a focused handle. Shift moves faster.

Your curveLinear, for comparison

Ease out: starts fast, ends slow. Things entering the screen. Fast start, gentle landing.

.box {
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.box.is-open {
  transform: translateX(240px);
}

The 12 principles

In The Illusion of Life (1981), Disney animators Ollie Johnston and Frank Thomas wrote down the rules that make drawings feel alive. They are not only for characters. They are why a card that squashes slightly on landing feels physical, and why a modal that anticipates before it closes feels intentional.

Each tile below runs the same scene twice: with the principle and without it. Turn the grid to “Without” and watch how quickly the life drains out.

The 12 principles, with and without

Twelve small loops, one per principle. Flip the whole grid, or a single tile, to see what each principle adds. Slow it down to study the spacing.

01 Squash & stretch
Objects deform with speed and impact, so they feel soft and heavy instead of rigid.
02 Anticipation
A small move the opposite way first, so the audience knows something is about to happen.
03 Staging
Show one idea at a time. Everything else holds still so the eye knows where to look.
04 Pose to pose
Plan the key poses first, then fill the frames between them. The alternative, straight ahead, improvises frame by frame and drifts.
05 Follow through
Loose parts keep moving after the body stops, and settle at their own pace. Overlapping action stops everything feeling glued together.
06 Slow in & slow out
Real things accelerate and decelerate. The dots show equal slices of time: they bunch up at the ends when easing is on.
07 Arcs
Natural motion follows curved paths. Interpolating in a straight line makes a swing look mechanical, and here even stretches the string.
08 Secondary action
Smaller motions that support the main one: the flag and the shadow make the hop read as alive, without stealing focus.
09 Timing
The number of frames an action takes tells us how heavy it is. The big ball lands and stays; the small one keeps bouncing.
10 Exaggeration
Push the pose or timing past realism to make the idea read. A little more than feels safe, less than cartoon.
11 Solid drawing
Treat shapes as volumes in space. A turning cube stays a cube; a flat card that just narrows reads as paper.
12 Appeal
A clear, pleasing design with a bit of life: smooth timing, a breath, a blink. Stiff, stepped motion reads as broken.

Timing is how long

Easing is how it moves

Easing playground

The 12 principles

The 12 principles, with and without

01 Squash & stretch

02 Anticipation

03 Staging

04 Pose to pose

05 Follow through

06 Slow in & slow out

07 Arcs

08 Secondary action

09 Timing

10 Exaggeration

11 Solid drawing

12 Appeal

Rules of thumb