How do I make a pixel animation?

Choose Pencil and a colour, then draw on the canvas. Duplicate frame copies a pose so you can change it; Add frame starts an empty pose. Set the duration in milliseconds, use Play preview and download the result. New blank animation uses the width and height you entered. The opening bouncing ball may be replaced by your saved browser draft.

How do I make a walking, running or idle pixel animation?

Load walk example gives four alternating contact and passing poses. Load run example gives four poses with wider strides and airborne frames. Load idle example gives two breathing poses with stationary feet. Each is an original 16 x 16 character you can edit, preview and export as a GIF or sprite sheet. Change the limbs, colours or timing to make it your own; Undo restores the animation the example replaced.

What is this pixel animation software best suited for?

It is browser software for small 2D raster animations: up to 256 x 256 pixels, 100 frames, 8 layers and 255 colours plus transparency. Use it for simple sprites and frame-by-frame pixel art. It has no AI generation, automatic in-between frames, 3D animation or commercial character library.

Can I use it free online, on a Mac or an iPad?

The editor runs on this page without an installer. Draw with a mouse or touch, or focus the canvas and use arrow keys to move, Enter or Space to paint, and Shift with arrows to move four pixels. Control or Command with Z undoes; Shift with Z or Y redoes. Use a current browser that supports canvas and file downloads. This page does not supply an app, APK or native device animation installer.

What does onion skinning do?

Previous frame shows the preceding pose faintly behind transparent pixels. Previous and next also shows the following pose. The ends do not wrap. Onion skin appears only in the editor, never in the small preview or exports. Hidden layers stay in project JSON but are omitted from the preview and image exports.

Why is a 25 ms GIF frame written as 30 ms?

GIF delays use hundredths of a second. The tool rounds half up: 25 ms becomes 3 hundredths, or 30 ms; 100 ms becomes 10 hundredths. Frame timing lists the set and encoded delays. Viewers may schedule playback differently. Durations must be 20 to 2000 ms; sheet data, timing.json and project JSON retain the set milliseconds.

How do I save a GIF, sprite sheet or PNG animation frames?

Download GIF writes a looping animation. Download sprite sheet PNG packs frames left to right with no padding, wrapping before a row exceeds 8,192 pixels. Download sheet data JSON saves each frame rectangle and duration for slicing and timing in a game engine. Download PNG frames ZIP includes individual frame images and timing.json. Save project JSON preserves editable layers, colours and timing. Export errors appear on the page; an edit during export cancels that export.

Can I import an image or reopen my work?

Import image places one decoded PNG, GIF, JPEG, WebP or BMP picture on the current frame and layer; it does not import a GIF’s full animation. Images may contain up to 16,777,216 pixels and shrink to fit using nearest-neighbour sampling. Pixels at least half opaque keep their colours while the palette has room, then use the nearest palette colour. More transparent pixels leave the layer unchanged. Open project JSON reopens this tool’s saved format. The browser also tries to save touched drafts locally; keep a project download for a durable copy.

How can I make a smoother pixel animation?

Duplicate a frame, adjust the pose a little and repeat to add manually drawn in-between frames. Use Previous and next onion skin to line up the movement and shorten durations to suit the added poses. The editor uses whole pixels; it does not interpolate motion or provide subpixel animation.

Sprite Animation Studio

Draw pixel art frame by frame, adjust each frame’s timing and preview the loop. Start blank or edit an original walk, run or idle character example. Export a GIF, sprite sheet, PNG frames ZIP or editable project JSON. Drawing and exports stay on your device.

Draw

Tool

Palette (16 of 255 colours)

Edit colour 5

Onion skin (preview only)

Character examples

Loading replaces this animation. Undo brings it back.

Frame 1 duration (20 to 2000 ms)The GIF encodes 160 ms for this frame (16 hundredths of a second).

Canvas size (1 to 256 pixels a side)

WidthHeight

Import imageOpen project JSON

Frame 1 of 4, layer 2 + onion skin

Frame 1 of 4, 160 ms, 16 x 16 pixels: 28 painted pixels in 3 colours on the visible layers.

Frames (4 of 100)

Layers, top first (2 of 8)

Preview, as exported

Export

Frames: 4

Total duration: 440 ms

GIF encoded loop: 440 ms, as set

Sprite sheet: 64 x 16

Canvas: 16 x 16, 2 layers

Frame timing

A GIF stores each delay in hundredths of a second, so a duration that is not a multiple of 10 ms is rounded half up. The GIF columns show the encoded delay; viewers may schedule playback differently. The sheet data, the ZIP's timing.json and the project file keep the milliseconds you set.

Frame	Set	GIF delay	GIF encoded
1	160 ms	16 cs	160 ms
2	80 ms	8 cs	80 ms
3	120 ms	12 cs	120 ms
4	80 ms	8 cs	80 ms

Worked cases

Frame timingtwo 2 x 2 frames, red at 100 ms then blue at 200 msred, then blue; total 300 ms; GIF delays 10 and 20 cs
Sprite sheetthe same two 2 x 2 frames4 x 2 sheet, frame 2 at x 2
GIF roundingone frame set to 25 ms25 ms is written as 3 cs and plays for 30 ms if the viewer honors the encoded delay; the timing table shows 30 ms

How the exports are made. Image exports (GIF, sprite sheet PNG and PNG frames) flatten the visible layers of each frame, leaving out onion skin and hidden layers. Editable project JSON retains all layers and their pixels, including hidden layers. The GIF uses your palette as its colour table with one extra slot for transparency, clears each frame before the next and loops forever. The sprite sheet is one row of frames that wraps onto more rows past 8,192 pixels, and its data JSON gives each frame's rectangle and duration. Nothing is uploaded: the drawing, the files and the exports stay on this device.

Common questions

How do I make a pixel animation?: Choose Pencil and a colour, then draw on the canvas. Duplicate frame copies a pose so you can change it; Add frame starts an empty pose. Set the duration in milliseconds, use Play preview and download the result. New blank animation uses the width and height you entered. The opening bouncing ball may be replaced by your saved browser draft.
How do I make a walking, running or idle pixel animation?: Load walk example gives four alternating contact and passing poses. Load run example gives four poses with wider strides and airborne frames. Load idle example gives two breathing poses with stationary feet. Each is an original 16 x 16 character you can edit, preview and export as a GIF or sprite sheet. Change the limbs, colours or timing to make it your own; Undo restores the animation the example replaced.
What is this pixel animation software best suited for?: It is browser software for small 2D raster animations: up to 256 x 256 pixels, 100 frames, 8 layers and 255 colours plus transparency. Use it for simple sprites and frame-by-frame pixel art. It has no AI generation, automatic in-between frames, 3D animation or commercial character library.
Can I use it free online, on a Mac or an iPad?: The editor runs on this page without an installer. Draw with a mouse or touch, or focus the canvas and use arrow keys to move, Enter or Space to paint, and Shift with arrows to move four pixels. Control or Command with Z undoes; Shift with Z or Y redoes. Use a current browser that supports canvas and file downloads. This page does not supply an app, APK or native device animation installer.
What does onion skinning do?: Previous frame shows the preceding pose faintly behind transparent pixels. Previous and next also shows the following pose. The ends do not wrap. Onion skin appears only in the editor, never in the small preview or exports. Hidden layers stay in project JSON but are omitted from the preview and image exports.
Why is a 25 ms GIF frame written as 30 ms?: GIF delays use hundredths of a second. The tool rounds half up: 25 ms becomes 3 hundredths, or 30 ms; 100 ms becomes 10 hundredths. Frame timing lists the set and encoded delays. Viewers may schedule playback differently. Durations must be 20 to 2000 ms; sheet data, timing.json and project JSON retain the set milliseconds.
How do I save a GIF, sprite sheet or PNG animation frames?: Download GIF writes a looping animation. Download sprite sheet PNG packs frames left to right with no padding, wrapping before a row exceeds 8,192 pixels. Download sheet data JSON saves each frame rectangle and duration for slicing and timing in a game engine. Download PNG frames ZIP includes individual frame images and timing.json. Save project JSON preserves editable layers, colours and timing. Export errors appear on the page; an edit during export cancels that export.
Can I import an image or reopen my work?: Import image places one decoded PNG, GIF, JPEG, WebP or BMP picture on the current frame and layer; it does not import a GIF’s full animation. Images may contain up to 16,777,216 pixels and shrink to fit using nearest-neighbour sampling. Pixels at least half opaque keep their colours while the palette has room, then use the nearest palette colour. More transparent pixels leave the layer unchanged. Open project JSON reopens this tool’s saved format. The browser also tries to save touched drafts locally; keep a project download for a durable copy.
How can I make a smoother pixel animation?: Duplicate a frame, adjust the pose a little and repeat to add manually drawn in-between frames. Use Previous and next onion skin to line up the movement and shorten durations to suit the added poses. The editor uses whole pixels; it does not interpolate motion or provide subpixel animation.

Raster frame animation; no automatic interpolation, AI character generation or commercial game-art library. GIF uses a bounded palette and centisecond timings; exports show actual durations.