How to animate
How to animate, step by step: key poses, in-betweens, onion skin, timing and frame rates, with a free animation app you can use right on this page.
Draw a frame, tap + for the next one, and change the drawing a little. The last frame shows faintly in red underneath (onion skin), so each drawing follows on from it.
Your first animation in 10 minutes
- 01Press Start animating and draw a ball at the top left of the frame.
- 02Tap + and draw the ball a little lower and to the right, using the red onion skin of the last frame as a guide.
- 03Keep going until the ball hits the ground. Make the gaps bigger as it falls: it speeds up.
- 04On the frame where it hits, draw it squashed flat. Then draw it rising again, with smaller gaps as it slows down.
- 05Press Play. That's a bouncing ball, the first exercise every animator does.
How animation works
An animation is a series of still drawings shown one after another, fast. Each drawing (a frame) is a little different from the last, and your eye blends them into movement. At 12 drawings a second, a 5-second animation is 60 drawings.
You don't draw them in order from start to finish. Animators first draw the key poses, the most important moments of a movement, and then fill in the drawings between them, the in-betweens.
Key poses and in-betweens
- Draw the start and the end of the movement first: a hand down, a hand up.
- Add a breakdown in the middle: the pose that shows how it gets from one to the other (does the arm swing in an arc?).
- Fill in the in-betweens. Show the next frame in the onion skin so you can see the poses on both sides.
- Duplicate a frame when only part of the drawing moves, and redraw just that part.
- Hold a pose for a few frames (duplicate it) to give the viewer time to read it.
Timing and spacing
Timing is how many frames a movement takes; spacing is how far the drawing moves between frames. Things that start or stop slowly have small gaps at the ends and bigger gaps in the middle, which animators call easing in and out. A falling ball does the opposite: the gaps grow as it speeds up.
Frame rate decides how smooth it feels. 12 frames per second is the classic hand-drawn speed ("on twos" at 24); 8 is choppier but needs fewer drawings; 24 is smooth but twice the work.
The principles that make it look alive
- Squash and stretch: soft things flatten when they hit and stretch when they move fast.
- Anticipation: a small movement the other way before the main one (crouch before a jump).
- Arcs: arms, heads and thrown things move along curves, not straight lines.
- Follow-through: hair, tails and clothes keep moving after the body stops.
- These come from Disney animators Frank Thomas and Ollie Johnston's twelve principles, in their book The Illusion of Life (1981).
Questions
How do I start animating?
Start with a bouncing ball: about 12 to 20 drawings that teach timing, spacing and squash and stretch. Then try a stick figure jumping or waving. Use onion skin so you can see the last drawing while you draw the next.
What do I need to animate?
A phone, tablet or computer and a browser. A stylus or Apple Pencil helps, but a finger or mouse works for simple animations. The studio on this page has the tools: pen, pencil, marker, eraser, fill, layers and onion skin.
How many drawings is one second of animation?
At 12 frames per second, 12 drawings. Many hand-drawn films run at 24 frames per second but hold each drawing for 2 frames, so they also use about 12 drawings a second.
Can I learn animation for free?
Yes. The principles are free to learn, and practice is what counts. Draw short exercises (a bouncing ball, a pendulum, a flag waving, a walk) in a free animation app like this one, play them back, and fix what looks wrong.
How long does it take to animate a short clip?
A 3-second bouncing ball takes a beginner 15 to 30 minutes. A 10-second character animation can take a few hours, mostly in the in-betweens.
Are my drawings uploaded anywhere?
No. Your drawings, frames and the videos you make all stay in your browser on this device. Nothing is sent to us or stored on a server.