Frame-by-Frame Animation: A Beginner's Guide

What is frame-by-frame animation?

Frame-by-frame animation is the craft of creating movement by drawing a sequence of individual images, then showing them one after another. Each drawing is a single frame. On its own a frame is just a still picture, but play a series of them in quick succession and your eye stitches them together into continuous motion.

It is the oldest and most direct form of animation — the same idea behind a hand-drawn flipbook and behind classic hand-drawn films. Nothing is automated: the animator decides exactly what happens on every frame. That control is what makes the technique so expressive, and why learning it teaches you the fundamentals that every other style of animation is built on.

How still frames create movement

When images change fast enough, your brain blends them into a single moving picture. If a drawing of a ball is a little higher in each successive frame, the ball appears to rise smoothly rather than jump. The illusion depends on two things: showing enough frames per second, and making the change between frames small and consistent.

Think of it as a flipbook. The more pages you draw for the same action, the smoother it looks — but the more work it is. Great frame-by-frame animation is largely about spending that effort wisely: putting frames where the eye needs them and holding back where it does not.

Frame rate: the speed of your flipbook

Frame rate, measured in frames per second (FPS), is how many frames play in one second. Higher frame rates look smoother because the change between frames is smaller. Common choices are 12 FPS, 24 FPS and 30 FPS.

Many hand-drawn productions animate "on twos" — drawing a new image every two frames of a 24 FPS timeline, which gives roughly 12 drawings per second. It reads as smooth to most viewers while cutting the drawing workload in half. Fast or delicate motion is often animated "on ones" (a new drawing every frame) for extra fluidity.

Key poses: the frames that matter

Not every frame carries the same weight. Key poses (or keyframes) are the most important moments of an action — the poses that tell the story even if you saw nothing in between. For a character throwing a ball, the key poses might be the wind-up, the moment of release, and the follow-through.

Experienced animators almost always draw the key poses first. If the keys read clearly and have good timing, the animation is already halfway to working. If the keys are weak, no amount of smoothing in between will save it.

In-between frames

In-betweens are the frames that connect one key pose to the next. Their job is to carry the motion — to describe the path the subject travels and how its shape changes along the way. Because you decide how many in-betweens to add and where to place them, they are where a lot of the "feel" of an animation lives.

A useful mental model: keys decide what happens, in-betweens decide how it happens. Two animations can share the same keys yet feel completely different depending on how their in-betweens are spaced.

Timing and spacing

Timing is how many frames an action takes — its duration. A punch that lands in three frames feels snappy; the same punch over twelve frames feels slow and heavy. Spacing is how far the subject moves between each frame. Frames placed close together read as slow motion; frames placed far apart read as fast motion.

Spacing is what makes movement feel like it has weight. Things in the real world accelerate and decelerate — they rarely move at a constant speed. Bunching frames near the start and end of a move, with wider gaps through the middle, produces natural ease-in and ease-out.

A simple frame-by-frame workflow

Here is a reliable process you can apply to almost any short action, from a blink to a bouncing ball:

1. 1
   Plan the action

   Decide what happens and roughly how long it takes. A quick thumbnail or even a mental note of the start and end pose is enough.
2. 2
   Draw the key poses

   Block in only the most important frames. Get their shapes and timing reading clearly before adding anything else.
3. 3
   Add breakdowns

   Draw the important transitional pose between keys — the frame that defines the path of the movement.
4. 4
   Fill in in-betweens

   Add the remaining frames, watching your spacing so the motion eases in and out rather than moving mechanically.
5. 5
   Play, review, refine

   Loop the animation, spot what feels off, and fix the smallest thing that makes the biggest difference. Repeat.

Working keys-first keeps you in control. It is far easier to fix timing when you have five key drawings than when you have forty finished frames.

Common beginner mistakes

These are the issues that trip up almost everyone at first — and they are all fixable:

• Animating straight ahead with no plan. Drawing frame 1, then 2, then 3 without keys often drifts off model and loses timing. Block your keys first.
• Perfectly even spacing. It is the fastest way to make motion feel mechanical. Add ease-in and ease-out with your spacing.
• Too few frames for fast motion. If an action strobes or skips, it needs more in-betweens or a smear frame to bridge the gap.
• Ignoring weight. Everything decelerates and accelerates. A feather and a bowling ball should never share the same spacing.
• Never using a reference. Watching real movement — or filming yourself — reveals timing you would never guess.

Practise in FrameAnim

FrameAnim is built for exactly this workflow. Add frames along the timeline, draw on each one, and press play to watch your sequence loop instantly. A few features make frame-by-frame work much easier:

• Onion skinning shows ghosted versions of the surrounding frames so you can line up each new drawing. Learn how onion skinning works.
• Adjustable FPS lets you switch between 12, 24 and 30 FPS to feel how frame rate changes your motion.
• The timeline makes it easy to add, duplicate and reorder frames while you block in keys and fill in-betweens.

The best next step is a hands-on exercise. The bouncing ball tutorial puts every idea on this page to work, or you can study finished loops on the animation examples page.