How do I make a pixel animation?

Pick a tool and a colour and draw on the canvas. Press Duplicate frame to copy the current pose and change it a little, or Add frame for a blank one, and set each frame's duration in milliseconds. Play preview runs the frames at those durations; when it looks right, press Download GIF. The page starts with a small bouncing-ball example you can draw over (or your restored draft, if this browser kept one); press New blank animation to start from an empty canvas of the size you typed.

What is onion skinning, and does it show up in the GIF?

Onion skin draws the previous frame at about 38 percent opacity, and with Previous and next also the following frame at about 19 percent, wherever the frame you are editing is transparent, so you can line up the next pose. It is only drawn in the editor. The GIF, the sprite sheet, the PNG frames and the small preview player are all made from the frames alone, so the onion skin never appears in a file. The first frame has no frame before it; nothing wraps around.

Why does my GIF frame last 30 ms when I set 25 ms?

A GIF stores each delay in whole hundredths of a second, so the tool rounds half up: 25 ms is written as 3 hundredths and plays for 30 ms, while 100 ms is written as 10 and plays exactly. The Frame timing table lists the duration you set, the delay written into the GIF and what the GIF actually plays, and the status line gives the loop's real total. The sprite sheet data, the ZIP's timing.json and the project file keep your exact milliseconds. The shortest duration is 20 ms because most browsers play GIF delays of 10 ms or less much more slowly than set.

How do I use the sprite sheet in a game engine?

Frames sit left to right in one row, each cell exactly the canvas size with no padding, and wrap onto more rows only when a row would pass 8,192 pixels. Download sheet data JSON gives every frame's number, x, y, width, height and duration in milliseconds, which is what an engine needs to cut the frames out and time them. Every pixel is fully opaque or fully transparent and PNG is lossless, so the cut frames match the drawing pixel for pixel.

Can I draw without a mouse?

Yes. Tab to the canvas and use the arrow keys to move the cursor one pixel, or four with Shift; Home and End jump to the ends of the row. Enter or Space applies the current tool at the cursor, Control or Command with Z undoes, and adding Shift, or pressing Y instead, redoes. The status line reads out the cursor position and the colour under it. Every other control, from frames and layers to the palette and exports, is an ordinary button or field.

Can I import a picture or come back to an animation later?

Import image places a PNG, GIF, JPEG, WebP or BMP picture of up to 16,777,216 pixels (4096 x 4096) on the current layer of the current frame, at the top-left corner; a picture larger than the canvas is shrunk to fit with nearest-neighbour sampling. Pixels at least half opaque keep their colour while the palette has room (it holds 255 colours) and snap to the nearest palette colour after that; more transparent pixels leave the layer as it was. Save project JSON keeps every frame, layer, hidden layer, colour and duration, and Open project JSON brings it all back. This browser also remembers your latest draft when it fits in local storage.

What happens to hidden layers?

A hidden layer stays in the project, in the undo history and in the saved project JSON, but it is left out of the canvas, the preview and every export. Show it again to bring it back into the GIF, the sprite sheet and the PNG frames.

Sprite Animation Studio

Draw a pixel animation one frame at a time on a canvas of up to 256 x 256 pixels, with up to 100 frames and 8 layers. Pencil, eraser and fill work with a mouse, a finger or the keyboard (arrow keys move a cursor, Enter paints), and the last 100 edits can be undone and redone. Onion skin shows the frame before, or the frames on both sides, faintly behind the one you are drawing, and never reaches an export. Each frame keeps its own duration from 20 to 2000 ms, and the preview plays them as set. When it moves the way you want, download an animated GIF that uses your palette as its colour table and reports the delays it actually wrote, a sprite sheet PNG with a JSON of frame rectangles and durations, a ZIP of PNG frames with timing.json, or a project JSON you can open here again. You can also place a PNG, GIF, JPEG, WebP or BMP picture onto a layer. Everything runs on your device and nothing is uploaded.

Draw

Tool

Palette (16 of 255 colours)

Edit colour 5

Onion skin (preview only)

Frame 1 duration (20 to 2000 ms)The GIF plays 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 plays: 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 and the GIF columns show what it will actually play. The sheet data, the ZIP's timing.json and the project file keep the milliseconds you set.

Frame	Set	GIF delay	GIF plays
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; the timing table shows 30 ms

How the exports are made. Every export flattens the visible layers of each frame, so the onion skin and hidden layers never reach a file. 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?: Pick a tool and a colour and draw on the canvas. Press Duplicate frame to copy the current pose and change it a little, or Add frame for a blank one, and set each frame's duration in milliseconds. Play preview runs the frames at those durations; when it looks right, press Download GIF. The page starts with a small bouncing-ball example you can draw over (or your restored draft, if this browser kept one); press New blank animation to start from an empty canvas of the size you typed.
What is onion skinning, and does it show up in the GIF?: Onion skin draws the previous frame at about 38 percent opacity, and with Previous and next also the following frame at about 19 percent, wherever the frame you are editing is transparent, so you can line up the next pose. It is only drawn in the editor. The GIF, the sprite sheet, the PNG frames and the small preview player are all made from the frames alone, so the onion skin never appears in a file. The first frame has no frame before it; nothing wraps around.
Why does my GIF frame last 30 ms when I set 25 ms?: A GIF stores each delay in whole hundredths of a second, so the tool rounds half up: 25 ms is written as 3 hundredths and plays for 30 ms, while 100 ms is written as 10 and plays exactly. The Frame timing table lists the duration you set, the delay written into the GIF and what the GIF actually plays, and the status line gives the loop's real total. The sprite sheet data, the ZIP's timing.json and the project file keep your exact milliseconds. The shortest duration is 20 ms because most browsers play GIF delays of 10 ms or less much more slowly than set.
How do I use the sprite sheet in a game engine?: Frames sit left to right in one row, each cell exactly the canvas size with no padding, and wrap onto more rows only when a row would pass 8,192 pixels. Download sheet data JSON gives every frame's number, x, y, width, height and duration in milliseconds, which is what an engine needs to cut the frames out and time them. Every pixel is fully opaque or fully transparent and PNG is lossless, so the cut frames match the drawing pixel for pixel.
Can I draw without a mouse?: Yes. Tab to the canvas and use the arrow keys to move the cursor one pixel, or four with Shift; Home and End jump to the ends of the row. Enter or Space applies the current tool at the cursor, Control or Command with Z undoes, and adding Shift, or pressing Y instead, redoes. The status line reads out the cursor position and the colour under it. Every other control, from frames and layers to the palette and exports, is an ordinary button or field.
Can I import a picture or come back to an animation later?: Import image places a PNG, GIF, JPEG, WebP or BMP picture of up to 16,777,216 pixels (4096 x 4096) on the current layer of the current frame, at the top-left corner; a picture larger than the canvas is shrunk to fit with nearest-neighbour sampling. Pixels at least half opaque keep their colour while the palette has room (it holds 255 colours) and snap to the nearest palette colour after that; more transparent pixels leave the layer as it was. Save project JSON keeps every frame, layer, hidden layer, colour and duration, and Open project JSON brings it all back. This browser also remembers your latest draft when it fits in local storage.
What happens to hidden layers?: A hidden layer stays in the project, in the undo history and in the saved project JSON, but it is left out of the canvas, the preview and every export. Show it again to bring it back into the GIF, the sprite sheet and the PNG frames.

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.