Frame-by-Frame Pixel Art Animation: Onion Skinning, FPS & GIF Export

A static sprite is good; a sprite that moves is what makes a game feel alive. Pixel art animation is built one frame at a time, and the two things that make it click are onion skinning (seeing the neighbouring frames while you draw the next one) and the right FPS. This guide shows how to animate pixel art frame by frame in your browser and export it as an animated GIF - free, no install.

Open the animation timeline

How frame-by-frame pixel art animation works

Every pixel animation - a walk cycle, a flickering torch, a coin spin - is just a sequence of still frames shown fast enough that your eye blends them into motion. The skill isn't drawing fast; it's drawing each frame in relation to the one before it. That's exactly the problem onion skinning solves.

What is onion skinning?

Onion skinning shows a faded "ghost" of the neighbouring frames - the one before and the one after - underneath the frame you're drawing. The name comes from traditional animation, where animators flipped translucent paper to trace motion.

Why it matters in pixel art: every pixel of movement counts. With onion skinning on, you can see exactly how far a foot moved last frame, so the next step lands at a believable distance instead of jumping or sliding. Toggle it on from the timeline before you draw frame two - you'll never want to animate without it.

Animate pixel art in 5 steps

1. Draw your first frame

In the editor, draw the base pose - the contact frame of a walk, the rest position of an idle. This is your anchor.

2. Duplicate it

Use the timeline to duplicate the frame rather than starting blank. Most of frame two is the same as frame one; you only move what changes. Duplicating keeps your silhouette and palette consistent.

3. Turn on onion skinning and adjust

With the neighbouring frames ghosted underneath, nudge the parts that move - a leg forward, an arm back, the torch flame shifting. Small, deliberate pixel offsets read as smooth motion.

4. Preview at your target FPS

Press Space to play. Tune the FPS until the motion feels right:

FPS	Feel	Good for
4–6	Snappy, retro	Classic 8-bit walk cycles, idles
8–12	Smooth, modern	Most game animations
15–24	Very fluid	Effects, flourishes, cutscenes

Lower FPS isn't worse - a lot of beloved retro animation lives at 6–8 FPS. More frames means more work and more memory, so spend them where motion needs to be smooth.

5. Export an animated GIF

When playback looks right, open the Export panel and export an animated GIF - perfect for sharing on social, in a devlog, or in a portfolio. For use inside a game engine, export a sprite sheet instead, which preserves each frame and its timing.

How many frames does an animation need?

Fewer than you'd guess. Classic loops are remarkably economical:

• Idle / breathing: 2–4 frames
• Walk cycle: 4–8 frames
• Run cycle: 6–8 frames
• Attack / effect: 3–6 frames

Start minimal and add frames only where the motion looks choppy. A tight 4-frame walk almost always beats a sloppy 12-frame one.

Tips for smoother pixel animation

• Animate the silhouette first. If the outline reads as motion, the interior details follow.
• Loop seamlessly. For a cycle, the last frame should lead naturally back into the first. Preview the loop several times.
• Keep volume consistent. A character's mass shouldn't visibly grow or shrink between frames - onion skinning helps you catch this.
• Reuse frames. A symmetrical walk can mirror its left and right steps; you don't always need unique art for both.
• Save the project. Export a .spearite file so you can revise the animation later without redrawing.

Frequently asked questions

Can I animate pixel art online for free? Yes. Spearite's timeline, onion skinning, playback, and GIF export all run free in your browser with no signup.

What FPS should pixel art animation use? 8–12 FPS suits most game animation. Retro-style loops often look great at 4–6 FPS. Match FPS to the feel you want, not to "more is better."

What is onion skinning used for? It overlays a faded version of nearby frames so you can position the next frame's movement accurately - essential for smooth frame-by-frame animation.

How do I export my animation? Export an animated GIF for sharing, or a sprite sheet (PNG + JSON) for game engines. Both are in the editor's Export panel.

How many frames do I need for a walk cycle? Often just 4–8. Start small and add frames only where the motion looks rough.

Start animating

Pick one simple loop - a blinking light or a 4-frame walk - and build it end to end. The workflow clicks fast.

Open the editor and start your first animation

Need a character to animate? Convert an image into a pixel sprite first, or learn smooth shading with dithering to make each frame look richer.