Animation timing basics

Why you need this

Stage 3 of the art pipeline, making it move, is mostly not drawing. A four-frame walk cycle with perfect drawings and wrong timing limps; the same four drawings with the right holds and spacing walk. This page gives you the vocabulary for time in animation and the handful of classical principles that survive at sprite scale, so that Sprite animation can talk about poses and let this page handle the clock.

The idea

Frames per second

The screen redraws at a fixed rate, the display rate, usually 60 frames per second (fps), so one display frame lasts $1000 / 60 = 16.7$ milliseconds. An animation does not have to change its drawing every display frame. How many display frames each drawing stays on screen is the animation's timing.

On ones, twos, and threes

Animators borrow film vocabulary. On ones means a new drawing every display frame: 16.7 ms per drawing at 60 fps. On twos holds each drawing for two display frames: 33.3 ms, 30 drawings per second. On threes is 50 ms per drawing, 20 per second. Most pixel animation runs on twos or slower; on ones needs twice the drawings for motion the eye barely distinguishes, and game motion often runs on fours (66.7 ms) or sixes (100 ms) with no loss of readability. This cluster writes both: "100 ms (6 frames at 60 fps)".

Holds

A hold keeps one drawing on screen longer than its neighbors. Holds are where the eye rests and reads a pose. A punch that flashes past in two drawings at 33 ms each is invisible; the same punch with the extended-arm drawing held for 100 ms is a hit. An idle animation is mostly holds with small changes between them.

Keyframes and inbetweens

Keyframes (keys) are the drawings that define the motion: the extremes, the moments the pose is most readable. Inbetweens connect them. Draw keys first, check that they read in isolation, then fill inbetweens. At sprite scale a walk may be four keys with no inbetweens at all: the two contact poses (one foot forward touching the ground, then the other) and the two passing poses (legs crossing, body at its highest).

Timing versus spacing

Timing is how many frames an action takes. Spacing is how far the drawing moves between consecutive frames. Two animations with the same timing and different spacing feel completely different. A ball crossing 100 pixels in 6 frames, positions in pixels:

Frame	Linear	Eased
1	0	0
2	20	10
3	40	35
4	60	65
5	80	90
6	100	100

Linear spacing is 20 every frame: mechanical, a conveyor belt. The eased column moves 10, 25, 30, 25, 10: small steps at the start (ease-out of the rest pose, accelerating), large steps in the middle, small steps at the end (ease-in to the new pose, decelerating). Same six frames, same 100 ms, and the eased one looks like something with weight. Spacing is the tool that costs no extra frames.

Six principles that fit in a sprite

The classical list of animation principles has twelve entries. Six of them do real work at 16 pixels.

Squash and stretch. A moving object deforms: it stretches along the direction of fast motion and squashes when it stops against something, keeping its area roughly constant. A jumping 16-pixel character stretches to 14 wide by 18 tall at launch and squashes to 18 by 14 on landing for one or two frames. Two pixels of change is plenty; four is cartoon.

Anticipation. Before the main action, a smaller motion the opposite way. A character crouches two pixels for 100 ms before jumping; a sword pulls back one frame before swinging. Without it, actions start from nowhere and the player cannot read what happened.

Follow-through and overlapping action. Parts of a body stop at different times. The body lands and stops; the cape and hair keep moving for two or three frames and settle after. On a sprite this is one or two pixels of cape trailing one frame behind the torso, and it is the cheapest way to make a sprite feel alive.

Arcs. Almost nothing natural moves in a straight line. On a grid, an arc means the hand moves up-and-across, not just across: a 4-frame swing at positions (0,4), (2,2), (5,1), (8,2) instead of a flat row.

Timing and spacing. Covered above; the principle is that they are separate decisions. Choosing six frames does not decide where each frame goes.

Exaggeration. At 16 pixels a realistic motion of half a pixel is invisible. Push every pose one step past realistic: the crouch deeper, the stretch longer, the hold longer. If it looks slightly too much at 1x, it will read at 3x on a phone.

Looping

A game animation plays over and over, so the last frame must flow into the first: the step from frame N back to frame 1 has to look like every other step. The classic bug is drawing frame 1 and frame N as the same pose, which shows that pose twice as long and stutters once per loop. A symmetric cycle such as a walk (left step, right step) needs an even frame count so each half gets the same number of frames: 4, 6, or 8. Non-symmetric loops such as a flickering torch or a breathing idle can be any count, and odd counts (5, 7) hide the loop point.

Worked example

A ball bouncing in place, 12 frames, ground contact on frame 7, on twos (33.3 ms per frame, 400 ms per bounce). Height is the bottom of the ball above the ground in pixels; the ball is 8 by 8 at rest. Under gravity the spacing grows as it falls and shrinks as it rises, so the height follows a curve, not a line.

Frame	Height above ground	Sprite height	Sprite width	Note
1	40	8	8	apex, slowest
2	39	8	8
3	36	8	8
4	30	8	8
5	22	9	7	speeding up, slight stretch
6	12	10	6	fastest, full stretch
7	0	6	10	contact, squash, hold this frame longest
8	12	10	6	leaving the ground, stretch
9	22	9	7
10	30	8	8
11	36	8	8
12	39	8	8	flows into frame 1

Read the height column as spacing: 1, 3, 6, 8, 10, 12 pixels per frame on the way down, then the same in reverse. Frames 12, 1, and 2 differ by one pixel, so the apex has a natural hang without an explicit hold. The area stays near 64 pixels throughout (10 by 6 is 60, 9 by 7 is 63), which is what keeps the squash reading as the same ball rather than a shrinking one. In screen coordinates, where $y$ grows downward, the sprite's top is drawn at ground $y$ minus height minus sprite height.

In a game's art pipeline

Stage 3 owns this page. Before drawing a frame of a cycle you decide the frame count (even for symmetric cycles), the milliseconds per frame, and which frames hold. Then keys, then inbetweens. The numbers travel to stage 5: the sprite sheet carries a duration per frame, and the engine plays frames by elapsed milliseconds rather than display frames so a 30 fps device and a 120 fps device show the same animation. VFX and particles reuses squash, anticipation, and ease for bursts and puffs.

Common mistakes

• Even spacing everywhere. Symptom: every motion looks like it is on rails; a jump rises and falls at constant speed.
• No holds. Symptom: attacks are invisible; the player sees the wind-up and the result but never the hit pose.
• Duplicate first and last frames. Symptom: a stutter once per loop, one pose visibly shown twice as long as the others.
• Odd frame count on a walk. Symptom: one leg's step is a frame longer than the other's and the character limps.
• Everything stops at once. Symptom: the character lands like a statue; nothing trails or settles.
• Timing by display frames instead of milliseconds. Symptom: animations run twice as fast on a 120 fps phone.

Cost

Each drawing is a frame on the sprite sheet, so frame count is the cost that scales. A 4-frame walk on sixes (100 ms per frame) and an 8-frame walk on threes (50 ms) both take 400 ms per cycle and look similar in motion; the 8-frame one costs twice the artist's time and twice the sheet area for smoother arcs. Holds, spacing, and looping choices cost nothing beyond thought, which is why they come first. It starts to hurt when a character has a dozen actions in eight directions: 12 times 8 times 6 frames is 576 drawings, and every extra frame per action adds 96 more.

Going further

• Sprite animation, for the contact and passing poses of a walk cycle.
• VFX and particles, for the same principles applied to bursts and smoke.
• Character design for sprites, for building a character that is cheap to animate.
• Sprite sheets and export, for carrying per-frame durations into the engine.