How to Animate Pixel Art

Good pixel animation is small motion, carefully timed. This guide covers the full loop: frames, timing, onion skin and export.

Plan two frames before drawing ten

Every loop answers two questions: what moves, and what stays? Draw the extremes first (arm up / arm down, eyes open / closed), then add in-betweens only where motion stutters. Most great sprite loops are 2–4 frames; effects like fire or sparkles earn more.

Duplicate, then change as little as possible

In the animator, Duplicate the frame and move the smallest thing that sells the motion. Small displacements between frames read as smooth; large jumps read as teleporting. Reorder with ◀ ▶ when the sequence feels wrong — order is editable, not destiny.

Time it at 8 FPS, then adjust

Preview at 8 FPS: the default for a reason. Choppy? Add a frame or raise FPS. Sluggish? Remove a frame or drop to 6. Walk cycles live around 6–8, blinks and bounces around 4, shimmer and fire up to 12–24. Trust the preview, not the frame count.

Let onion skin do the measuring

Switch onion skin on and tune Ghost until neighbors are visible but faint: red is where you were, blue is where you are going. Even spacing between red, current and blue means even speed; bunching means easing. Step with ← → keys while watching one landmark pixel.

Sprite with red previous frame ghost and blue next frame ghost in onion skin — Figure: red is where you were, blue is where you are going.

Share the background, export the loop

Toggle 🔗 on background layers so static art never redraws — and never flickers. When the loop previews cleanly, export GIF for sharing (looping, transparent, upscaled for crispness) or a sprite sheet for game engines. Single frames can still leave as PNG, SVG or PDF.

Frequently asked questions

How many frames does a walk cycle need?

Four reads fine, six to eight reads smooth. Start with extremes, add in-betweens only where it stutters.

GIF or sprite sheet?

GIF for sharing and previews; sprite sheet for game engines.

Why does my background shimmer?

You redrew it per frame. Share it with 🔗 instead so it is stored once.

How do I fix a jump in my loop?

Make the last frame flow back into the first — end on the start pose — and check the seam in motion, never by scrubbing stills.

How many frames does my first loop need?

Two to four: draw the extremes first, add in-betweens only where the motion stutters. Count matters less than spacing.

Have a sprite ready? Animate it online