Draw a picture, add a frame, draw the next step, and watch it move. Onion skin shows the previous frames faintly so every drawing lines up. Set the speed in frames per second, then save your animation as a looping GIF, a video or a sprite sheet.
Last updated:
Frame 1 / 8
Frames
0%
Advertisement
Advertisement
How to use the Flipbook Animation Maker
Press Play to see the sample bouncing ball, or choose a canvas size and press Start new animation.
Draw the first frame with the pen. Use the eraser to fix lines and the fill bucket to color closed shapes.
Press Duplicate (to change a copy slightly) or Add frame (to draw from scratch). The red onion skin shows the earlier frames as a guide.
Repeat for each step of the motion, and press Play to check it. Adjust the Speed slider until the movement feels right.
Export as a GIF to share, a video for social media, or a sprite sheet for games.
Animation basics for beginners
Start with keyframes. Draw the most important poses first (for a jump: crouch, highest point, landing), then add in-between frames.
Ease in and ease out. Objects slow down near the top of a bounce and speed up as they fall. Place drawings closer together where the motion is slow and farther apart where it is fast.
Squash and stretch. A ball squashes flat when it hits the ground and stretches while moving fast. The sample animation uses both.
Hold frames. To pause, duplicate a frame a few times. At 8 fps, four identical frames make a half-second hold.
Loop cleanly. Make the last frame lead naturally back into the first, or turn on Ping-pong so the animation plays forward and then backward.
How many frames do I need?
Speed
Frames for 1 second
Frames for 3 seconds
Look
4 fps
4
12
Choppy, classic paper flipbook
8 fps
8
24
Simple cartoon, good for practice
12 fps
12
36
Smooth hand-drawn animation ("on twos")
24 fps
24
72
Film-smooth, a lot of drawing
Which export format should I choose?
GIF loops automatically and plays almost everywhere, including chats, forums and slides; it is limited to 256 colors, which suits line drawings. Video (MP4 or WebM) is best for social media and is usually smaller for long animations. A sprite sheet puts every frame in one grid image for game engines and CSS animations, and the ZIP of numbered PNG frames is handy for importing into video editors or other animation software.
Keyboard shortcuts
B pen, E eraser, F fill, , and . previous and next frame, N new frame, D duplicate frame, Space play or stop, Ctrl+Z undo, Ctrl+Y redo.
Frequently asked questions
How do I make a flipbook animation online?
Draw the first picture on frame 1, then press Duplicate or Add frame and draw the next position, slightly changed. With onion skin on, the previous frames appear as faint red drawings so you can line things up. Repeat for every step, press Play to watch it, and export a GIF or video.
What frame rate should I use?
Hand-drawn animation often uses 8 to 12 frames per second, which looks smooth enough while keeping the number of drawings small. Use 4 to 6 fps for a choppy, flipbook feel and 15 to 24 fps for very smooth motion. A 2-second animation at 12 fps needs 24 frames.
What is onion skinning?
Onion skinning shows nearby frames semi-transparently underneath the frame you are drawing, like the thin paper used by traditional animators. It helps you keep shapes consistent and space movements evenly. It is only a drawing guide and never appears in the exported animation.
Why is the GIF speed slightly different from my FPS?
GIF stores frame delays in hundredths of a second, so the delay is rounded: 8 fps becomes 12/100 s per frame (about 8.3 fps) and 30 fps becomes 3/100 s (about 33 fps). Many browsers also slow down GIFs with delays below 2/100 s, so the tool never goes below that.
Will the video be MP4?
The video is recorded in your browser with the MediaRecorder API. Recent versions of Chrome, Edge and Safari can record MP4 directly; other browsers record WebM, which plays in most players and on YouTube. The recording runs in real time, so a 3-second clip takes about 3 seconds.
Can I make a transparent GIF or sprite sheet?
Yes. Set Background to Transparent before exporting. The sprite sheet and ZIP frames then keep full transparency. GIF supports only fully transparent or fully opaque pixels, so soft semi-transparent edges become solid.
Is my animation saved?
Your frames stay in this browser tab while you work and are never uploaded. They are not stored permanently, so export a GIF, sprite sheet or ZIP of frames before closing the page. The browser warns you if you try to leave with unsaved drawing work.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.