How to Create a Frame-by-Frame Animated GIF in Your Browser with FliiipBook

FliiipBook is a browser-based animation tool for drawing frame-by-frame GIFs. You draw on a 24-frame timeline, use onion skinning to line up motion between frames, and export a looping GIF with one click. It works best on desktop or tablet — the site notes that the full creative experience needs a desktop or tablet, and mobile visitors are prompted to switch to desktop to start creating. If you want a quick, no-install way to make a short hand-drawn loop, this is the workflow.

What you get before you start

FliiipBook's feature set is built around short loops rather than long scenes:

24 frames — described on the site as "24 frames of glory. 2 full seconds of looping bliss," so plan for a roughly two-second loop.
Onion skinning — see the previous and next frames while you draw.
Keyboard shortcuts — hotkeys designed for both right-handed and left-handed users.
Undo/redo history.
One-click GIF export with unique filenames.
5 brush sizes — from 1px details to 50px strokes — plus a paint bucket, a spray can, and a spray-fill.
Textures you can add to your animation.
Timeline navigation across the 24 frames.

Step-by-step: draw and export your GIF

1. Open the app on desktop or tablet

Go to fliiipbook.com in your browser. Because the site states it works best on desktop or tablet, use one of those rather than a phone if you want the full toolset.

2. Sketch your key poses across the timeline

Move through the 24 frames and block in the main poses of your motion. You don't need to fill every frame at this stage — establishing the start, middle, and end of the movement first makes the in-between drawing much easier.

3. Turn on onion skinning to align motion

With onion skinning active, the previous and next frames appear as you draw. Use them to keep your character or object moving consistently from one frame to the next instead of jumping around. The site frames this as a way to get "perfect-ish timing and sort of smooth motion" — a realistic expectation for a 24-frame loop.

4. Speed up drawing with shortcuts and tools

Use the keyboard shortcuts to move between frames and trigger actions without leaving the canvas. The site highlights hotkeys for both right-handers and southpaws.
Pick from the 5 brush sizes for line work versus fills — 1px for fine detail, up to 50px for bold strokes.
Use the paint bucket for flat fills, the spray can for soft shading, and the spray-fill for texture-style coverage.
Add textures if you want a more illustrative look.
Rely on undo/redo freely while experimenting.

5. Preview the loop and fix timing

Play the animation back before exporting. Watch for frames where the motion stalls or snaps, and redraw those in-betweens using onion skinning as your guide. Since the loop is only about two seconds, small timing errors are very visible — a couple of adjusted frames usually makes the difference.

6. Export the GIF

Use the one-click GIF export. FliiipBook assigns unique filenames to exports, so you can produce multiple versions without overwriting earlier ones. The exported file is ready to share on the web.

Common snags to expect

Drawing on a phone. The site explicitly says it works best on desktop or tablet and asks mobile visitors to switch to desktop. Don't expect the full experience on a small screen.
Running out of frames. With a fixed 24-frame timeline, a complex motion won't fit. Simplify the action or loop a shorter movement rather than trying to cram in more poses.
Motion that looks jittery. This usually means the onion-skin reference wasn't followed closely enough between frames. Redraw the in-betweens with both the previous and next frames visible.
Losing work. Undo/redo covers in-session mistakes, but the site doesn't describe saved projects — export your GIF when you're happy with it rather than assuming it will persist.

When FliiipBook is the right choice

Choose it if you want a free-feeling, browser-based way to make a short hand-drawn GIF loop without installing software, and you're working on a desktop or tablet. Look elsewhere if you need long animations, precise frame timing controls, or a mobile-first workflow — the 24-frame limit and desktop/tablet recommendation are the main constraints to weigh before you start.