Animation Timing and FPS Explained

What FPS actually means

Frames per second — FPS — is simply how many still images are shown in one second of animation. At 12 FPS, twelve drawings flash past every second; at 24 FPS, twenty-four do. That is the entire definition, but it has a surprising amount of influence over how your animation feels.

It helps to think in terms of how long each frame stays on screen. At 12 FPS every frame lasts about 83 milliseconds. At 24 FPS it lasts about 42 milliseconds, and at 30 FPS about 33. The higher the frame rate, the shorter each frame is held and the smaller the visual jump between one frame and the next — which is why higher frame rates look smoother.

Frame rate is closely tied to the idea of a flipbook, which is covered in the beginner's guide to frame-by-frame animation. The faster you flip the pages, the smoother the motion — and the more pages you have to draw.

12 vs 24 vs 30 FPS

There is no single "correct" frame rate. Each common choice trades smoothness against the amount of work required:

• 12 FPS — the friendliest place to start. Half the drawings of 24 FPS, yet still reads as smooth for most motion. It has a slightly crisp, hand-made quality that suits stylised animation and simple loops.
• 24 FPS — the traditional frame rate of film. Smooth and cinematic. Many hand-drawn productions run a 24 FPS timeline but only draw a new image every second frame (see below), so the workload sits closer to 12 unique drawings a second.
• 30 FPS — very smooth, common for screen recordings, on-screen graphics and anything captured digitally. It demands the most drawings if every frame is unique.

Animating on ones and twos

Animators talk about working "on ones" or "on twos". Animating on ones means drawing a brand-new image for every single frame. Animating on twos means holding each drawing for two frames, so you produce half as many drawings for the same length of time.

On twos is the everyday workhorse of hand-drawn animation. It reads as smooth for most actions and roughly halves the drawing workload. You switch to ones when motion is fast or delicate — a quick head turn or a whip-fast punch — because on twos the gaps between drawings become large enough to strobe.

How frame rate changes the feel of motion

Lower frame rates give animation a punchy, deliberate, slightly stylised look. Higher frame rates feel smoother and more lifelike, edging toward the fluid look of live video. Neither is wrong — they are creative choices.

The important thing to understand is that frame rate and the number of drawings are separate decisions. You can set a smooth 24 FPS timeline and still draw on twos. Frame rate sets the maximum smoothness available; how many unique drawings you make decides how much of that smoothness you actually use.

Timing versus spacing

These two words are the heart of animation, and beginners constantly mix them up.

Timing is how long an action takes — its number of frames, or its duration. A door that slams shut in three frames has different timing from one that drifts shut over twenty.

Spacing is how far the subject travels between each frame. It is the distance from one drawing to the next. Spacing is what your eye reads as speed and weight, because things in the real world accelerate and slow down rather than moving at a constant rate.

Holds and moving holds

A hold is a stretch of frames where the subject stays on the same pose. Holds give the eye time to read an important moment and create rhythm — the pause before a reaction, the settle at the end of a gesture.

The trap is the dead hold: a pose held perfectly still for too long, which reads as the animation freezing or breaking. The fix is a moving hold — keep the pose but let it drift almost imperceptibly, a tiny shift of weight or a slow settle. That whisper of movement keeps the character alive without pulling focus.

Fast versus slow movement

Slow movement is made of many frames placed close together. Fast movement is made of fewer frames placed far apart. That is really all "speed" is in animation: spacing relative to frame rate.

The catch is that if spacing gets too wide for your frame rate, motion begins to strobe — it flickers or appears to jump instead of flowing. When that happens you have three options: add an in-between to shrink the gap, animate that section on ones, or use a stretch or smear frame to bridge the distance, an idea explored in the squash and stretch guide.

Choosing an FPS for your animation

Use these as starting points, not rules. When in doubt, animate at 12 FPS on twos and increase only if the motion needs it:

• Simple social loop or GIF sticker — 12 FPS. Small files, quick to make, plenty smooth.
• Hand-drawn character action — a 24 FPS timeline animated mostly on twos, dropping to ones for fast moments.
• Smooth, cinematic motion — 24 FPS, with more in-betweens where you want extra fluidity.
• Screen, UI or motion-graphics capture — 30 FPS for a clean, modern feel.

Setting and testing FPS in FrameAnim

FrameAnim lets you set the playback frame rate and preview your animation instantly, so you can feel the difference rather than guess at it. The fastest way to build an intuition for frame rate is a simple experiment:

1. 1
   Animate a short action

   A bouncing ball or a quick wave is perfect. Keep it to a handful of frames.
2. 2
   Play it at 12 FPS

   Loop the animation and notice its rhythm and crispness.
3. 3
   Switch to 24 FPS and replay

   The exact same drawings now play faster and read differently. Note how the feel changes.
4. 4
   Adjust spacing, not just speed

   If it strobes, add an in-between; if it drags, remove a frame or widen the spacing.

Once frame rate clicks, put it to work on a real exercise. The bouncing ball tutorial and the walk cycle tutorial both depend on good timing, and you can study finished loops on the animation examples page.