How Animation Works
An animation is a set of still pictures called frames. Each frame is only a little different from the one before. Shown one at a time, they look like separate pictures; shown quickly, one after another, your brain joins them up and you see movement. A flipbook does this with paper and your thumb, a cartoon with thousands of drawings, and this page with the frames your child draws.
The speed is measured in frames per second: how many pictures are shown each second. Films usually show 24 frames a second; hand-drawn cartoons often draw 12 and show each one twice. At 2 or 3 frames a second you can see each picture change; somewhere around 8 to 12 the pictures blur into smooth movement. Try the bouncing ball at speed 2 and then at speed 10 to see the difference.
The Maths of Frames
Animation is a good place to practise multiplication and division. To work out how long an animation lasts, divide the number of frames by the speed. To plan one, multiply: a 3-second animation at 4 frames a second needs 12 frames.
| Frames | Speed | One loop lasts |
|---|---|---|
| 6 frames | 3 frames a second | 6 ÷ 3 = 2 seconds |
| 8 frames | 8 frames a second | 8 ÷ 8 = 1 second |
| 12 frames | 6 frames a second | 12 ÷ 6 = 2 seconds |
| 10 frames | 4 frames a second | 10 ÷ 4 = 2½ seconds |
Onion Skin: The Animator’s Tracing Paper
Animators used to draw on thin, see-through paper so they could see the drawing underneath. This page does the same thing with onion skin: while you draw a frame, the frame before it shows faintly underneath. Draw your object a small step away from the faint one, and the movement will look smooth. Big jumps look jerky; tiny steps look slow. Turn onion skin off to see the frame on its own.
Ideas to Try
Tips for Smooth Animation
- Copy, then change. Use “Copy this frame” and change only the part that moves. The background stays still and the animation looks steadier.
- Small steps. Move things a little in each frame. Slower movement needs smaller steps; faster movement, bigger ones.
- Slow in, slow out. Real things speed up and slow down. A ball thrown upwards moves in big steps near the ground and small steps near the top.
- Plan the loop. If the last frame is close to the first, the GIF will loop smoothly forever.
Using It at Home or in Class
Animation joins art, maths and science: children practise drawing and planning, work out timings with multiplication and division, and see how the eye and brain turn quick pictures into movement. In class, pairs can share one animation, one child drawing and one checking the onion skin. At home, try making a real paper flipbook afterwards with the corner of a notebook – the same idea, with your thumb as the play button.
Make a Paper Flipbook Too
- Take a small notebook or a stack of 20 to 30 sticky notes, and work from the last page forwards.
- Draw your first picture near the outside edge of the last page, where your thumb will flick.
- Turn to the page in front. You can see the drawing through the paper: that is your onion skin. Draw it again, moved a tiny bit.
- Keep going, then hold the spine and flick the pages from back to front with your thumb.
Children who have planned an animation on screen first usually make a much better paper one, because they already know how small each step needs to be.
Nothing to Install, Nothing Uploaded
The animation studio runs entirely in your browser on any phone, tablet or computer. There is no account and no download. Drawings are never uploaded: the GIF is made on your own device and saved straight to it. Drawings are not kept when you close or reload the page, so save your GIF before you leave.
Frequently Asked Questions
An animation is a set of still pictures, called frames, each a little different from the one before. When they are shown quickly one after another, your brain joins them up and you see movement instead of separate pictures. Cartoons, flipbooks and films all work this way.
A simple loop such as a blinking face can work with 3 or 4 frames; a bouncing ball looks good with about 8. More frames with smaller changes between them make smoother movement. Divide the number of frames by the speed to find how long one loop lasts: 12 frames at 6 frames a second lasts 2 seconds.
Onion skin shows a faint copy of the previous frame underneath the one you are drawing, like tracing paper. It lets you move each drawing just a little from the last one, which is the secret of smooth animation. It is named after the thin, see-through paper animators used to use.
It is free, with no account and no download. Drawings stay in your browser: nothing is uploaded, and the GIF is made on your own device and saved straight to it. Drawings are not kept when you close the page, so save your GIF first.