Keyframes: how to animate anything on a timeline

In a hand-drawn animation studio the senior artist drew the important frames, the ones where a pose changed, and a junior drew every frame in between. The senior's drawings were the keys. Keyframes on a timeline are exactly that, with the junior replaced by arithmetic: you say where something is at one moment and where it is at another, and the software draws the in-betweens.

That is the entire concept. What separates motion that looks designed from motion that looks dragged across the screen is not the concept; it is three decisions that sit on top of it, and most people never get told what they are.

The mechanics, briefly

A clip has properties: position, scale, opacity, rotation, and for audio, volume. Each one can be given a keyframe track. Move the playhead to a moment, set a value, and a key is recorded there. Move later, set a different value, another key. Now the property travels from the first value to the second over the time between them, and the preview shows it as you scrub.

Two keys make a move. Three make a move with a change of direction. More than a handful on one property is almost always a sign that the idea should be simpler.

The properties stack. A title that flies in from the left and fades up at the same time is two tracks, position and opacity, each with two keys. A pop is scale over a short time. A picture-in-picture that slides into the corner is position, with maybe a scale to shrink it as it arrives. None of it is more than two keys per track.

Decision one: easing

Nothing in the physical world moves at a constant speed from a standstill and stops dead. Things accelerate, travel, and decelerate. A move that goes at one speed from key to key, which is what "linear" means, reads as mechanical, and the eye catches it as wrong even when the timing is right.

Easing is the shape of the speed between two keys, and it is the decision that matters most:

• Ease-out starts fast and slows into the end key. Use it for things arriving: a title landing, a panel sliding into place. It feels like the element has weight and has settled.
• Ease-in starts slow and accelerates away. Use it for things leaving: an exit that gathers pace and is gone.
• Smooth (ease in and out) does both, and is the default for a move with a visible start and end, like a camera drift or a PiP moving from one corner to another.
• Linear is for the things that genuinely are mechanical: a progress bar, a ticker, a rotation that should spin at one rate.

Set it per segment, so a move can arrive with an ease-out and leave with an ease-in. If a move feels wrong and the keys are in the right places, the easing is nearly always what is wrong.

Decision two: duration

A move that is too slow looks like a screensaver. A move that is too fast is a cut with a smear. The ranges that work are narrower than people expect:

• Interface-style moves, a title entering, a panel appearing, a PiP sliding in: 200 to 400 milliseconds. Fast enough to feel snappy, slow enough to be read as motion.
• A pop, a scale up and back to draw the eye: 150 to 250 milliseconds. Any longer and it is a balloon inflating.
• Camera-style moves, a slow drift across a still, a gentle push in: seconds. Five seconds for a ten to twenty percent change reads as cinematic. The same change over one second reads as a lurch.

The instinct on a first attempt is always to make interface moves too slow and camera moves too fast. Halve the first and double the second and you will usually be close.

Decision three: the reason

The question to ask before adding any keyframe is what the motion is for. Motion draws the eye; that is its whole power and its whole danger. An element that moves is an element the audience will look at, so if it moves for no reason, the audience has been told to look at nothing.

Good reasons: the element is arriving and the audience should notice it; the element is leaving and should not be missed; the audience's attention should go from one place to another and the move takes it there; the picture is a still and would look dead without a drift.

Bad reasons: the software can; it seemed plain; a template had it.

A video in which the only things that move are the things that should move feels calm and expensive. A video in which everything animates feels like a slideshow from 2009.

The three moves that cover most of it

The fly-in. Position from just off-screen to the final place, ease-out, 300 ms; opacity 0 to 1 over the same time. That is a title, a lower third, a callout, a logo. It is the move to learn first because it is the one used most. Its mirror, the fly-out, is ease-in and the reverse.

The pop. Scale from 100 to about 108 percent and back, over 200 ms, on a beat or a word. It says "this" without moving anything anywhere. Keep it small; ten percent is already a lot.

The drift. Position or scale changing by a small amount over the whole length of a shot, smooth easing. On a still it turns a photograph into a shot. On a static frame with a title it keeps the screen alive. On a screen recording a slow push in toward the thing being explained is the difference between a demo and a film of a demo.

And the one that is not a picture move at all: volume. Two keys on an audio clip's volume track are a fade; four are a dip under a specific line. It is the same tool, and knowing that means you never have to look for a separate one.

Ken Burns is keyframes with a better interface

For one specific case, a still image with a camera move across it, keyframing position and scale by hand is the slow way. The Ken Burns editor does the same thing as two framing windows: draw where the camera starts, draw where it ends, and the move is generated with the right aspect and a smooth ease. It is faster, it is harder to get wrong, and it is what you want for a photo sequence.

Reach for keyframes instead when the move is on something other than a still (a title, an overlay, a PiP), when you need a change of direction mid-clip, or when you are stacking properties that Ken Burns does not touch, like opacity or rotation. A clip carries either a crop or a Ken Burns move, not both, so a still that needs cropping and moving is a keyframe job too.

Small things that make it look professional

Hold at both ends. A move that starts on the first frame of a clip and ends on its last has no rest. Let the element sit still for a beat before it moves and after it arrives.

Stagger, do not synchronise. Three lines of a title that arrive at exactly the same moment look like one block. Offset them by 60 to 100 ms each and they read as three things arriving in order.

Overshoot is a spice. A title that lands slightly past its mark and settles back looks lively. Do it by adding a third key a little beyond the destination. Use it on one element per screen, not on all of them.

Move to the beat if there is one. Any move that lands on a musical accent feels intentional; the same move half a beat off feels like a mistake. Line the end key up with the beat, not the start.

And trust the preview: the export compiles the same curves the preview plays, so a move that looks right while scrubbing renders as it looked.

The order that works

1. Decide the reason for the motion first; if there is not one, do not add it.
2. Set two keys, start and end, and no more unless the move changes direction.
3. Choose the easing: ease-out to arrive, ease-in to leave, smooth for a drift, linear only for machinery.
4. Set the duration in the right band: hundreds of milliseconds for interface moves, seconds for camera moves.
5. Hold at both ends and stagger anything that arrives together.
6. Use Ken Burns for stills and save keyframes for everything else.