Skip to content

Pixel Art Animation Maker — Frames, Onion Skin, Tags

Draw an animation frame by frame in the browser. Frames, tags and durations live on the Studio timeline you also use for slicing and packing, and the Pixel workspace paints each frame with the neighbouring ones shown as onion skin, so a walk cycle can be drawn, played and exported in one place.

Drop a sprite, frames, a GIF or an .aseprite file to paint on — or an upscaled picture to clean up
Runs in your browser. Files are not uploaded.
Studio Pixel workspace: six CC0 ninja run frames on the timeline, one frame being edited with onion skin showing the frames before and after
The real Studio with a CC0 asset (OpenGameArt).
Exports to
  • .asepriteVerified· Aseprite 1.3.18
  • Engine bundlesVerified· Godot 4.7.2 · Unity 6000.5
  • Palette filesMeasured· read back
  • Frame PNG · .nerulioPlain files

What it does

  • New frame as a copy of the current one (Alt+N) or empty (Alt+Shift+N), delete frames with Alt+C, step with , and . and play or stop with Enter. Tags carry a direction (forward, reverse, ping-pong) and a repeat count.
  • Onion skin (F3) shows the previous and next frames under the one you paint, optionally tinted red and blue, with how many of each and their opacity set in the timeline. The preview window (F7) keeps playing the tag at a whole-number zoom while you paint.
  • Each frame keeps its own duration in milliseconds, so a held pose and a fast swing can sit in one animation. Playback was measured keeping 100 ms frames on time (20 frames in 2 s) on a 512×512, 100-frame sprite.
  • Painting a frame of an imported sheet gives that frame its own pixels; the other frames and the source sheet stay untouched, and the change is one undo step.
  • Frames come from anywhere the Sprite workspace reads: a sheet it cuts from its pixels, numbered PNG files, a GIF or APNG with its delays, or an .aseprite file with layers, tags and durations.

How to do it

  1. Drop a GIF, numbered frames or an .aseprite file on this page; they arrive as frames and the Pixel workspace opens. A single sheet opens in the Sprite workspace first so its cut can be checked and applied.
  2. Select a frame on the timeline, turn on onion skin with F3 and redraw the pose with the neighbouring frames visible.
  3. Add in-betweens with Alt+N, type the duration of each frame, and drag across the tag row of the timeline to name the animation.
  4. Press Enter or open the preview window with F7 to watch the loop, then save .aseprite or export GIF or APNG per animation in Pack & Export.

Timeline controls while you animate

The same timeline as the Sprite workspace, driven from the Pixel workspace.

ActionKeyWhat happens
New frame (copy)Alt+NDuplicates the current frame after it, ready to be redrawn
New empty frameAlt+Shift+NAdds a blank frame for a fresh pose
Delete framesAlt+CRemoves the selected frames in one undo step
Onion skinF3Previous and next frames shown under the current one; counts, opacity and tint adjustable
Play / preview windowEnter / F7Plays with per-frame durations; the preview stays sharp at whole-number zoom

Engine exports and how each was checked

"Verified" means the exported files were loaded by the real engine or tool on real CC0 assets and the result was compared with the source. Anything that was not loaded is labelled as such.

TargetFilesCheck
.asepritelayers · blend · opacity · locked · indexed palette · frames · tagsVerified Aseprite 1.3.18The real Aseprite command line reopened the file as INDEXED with 2 layers, Multiply at opacity 160 and the locked layer not editable; the frames are pixel-identical.
Palette files.gpl · .pal · .hex · .ase · .act · .jsonMeasured read backEach format was written and read back identical; Aseprite's own .gpl, .pal, .hex and .act and a real Adobe .ase (16 colours) were read.
Engine bundlesGodot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & ExportVerified Godot 4.7.2 · Unity 6000.5The sprite you drew is packed in Pack & Export; those engine files were loaded in each engine on real CC0 assets (47 of 49 runs pass; the 2 failures are a Phaser 3.90 bug the Phaser 3 preset avoids).
Frame PNG · .nerulioPNG-8 with the palette when an indexed frame fits it · project filePlain filesPlain files for any tool; no engine run is claimed for them.

Evidence

Cleanup benchmark, 69 CC0 cases with a known 1× original: the exact size found for 81 % (±1 px: 90 %) and 74.0 % of pixels exact with the background kept; the best competitor found 30 % of sizes (perfectPixel) and the best exact-pixel score was 44.6 % (unfake.js). An Aseprite-made ×4 nearest upscale came back 100 % exact and a ×3.78 bilinear resize 99.7 %, both with the size found automatically. A 1 px outline and a drop shadow matched Aseprite pixel for pixel (1846 and 705 px). .aseprite files written here reopen in Aseprite 1.3.18 as indexed, with their layers, blend mode and lock.

Limits

  • Not in the Pixel workspace (Aseprite has them): layer groups, linked cels, tilemap layers, reference layers, RotSprite and free rotation or scaling of a selection (only flips and 90°), gradient, spray, contour and text tools, custom brushes (square or round, 1–16 px), tiled drawing, Lua scripting and a command line.
  • The symmetry axis is typed, not dragged on the canvas. On touch there is no right button, so the background colour needs the swap button or X.
  • Cleanup: JPEG input comes back close (84 % of pixels within ΔE 0.02 with the background kept) but rarely exact (12 %); simulated generated art gets the exact size 20 % of the time (±1 px: 80 %); none of 7 real generated images was snapped automatically — you type the pixel size the panel suggests.
  • Indexed conversion picks the nearest colour in Oklab, not Aseprite's RGB distance: 68 % of the test sprite's pixels got a different (perceptually closer) pick. The Lospec search is the only network request and asks first.

Questions

Is there a limit on the number of frames?

There is no fixed limit; memory is the bound. The browser test paints a 512×512 sprite of 100 frames, where switching frames took 16 ms and undo 90 to 140 ms.

Do the , and . keys wrap around at the end of the animation?

No. In this version they stop at the first and last frame instead of wrapping, the same in the Sprite workspace. Play with Enter or loop inside a tag to watch the cycle continuously.

Can I export the animation as a GIF?

Yes, through Pack & Export: one GIF or exact APNG per animation, with each frame's own delay. The exported files were decoded again frame by frame; GIF has only on/off transparency, so keep soft edges in APNG.

Is it free, and do I need an account?

Everything on these pages is free and works without an account. There is no watermark and no export that is held back.

Are my sprites uploaded?

No. The Studio decodes, packs and exports in this browser tab. Projects are autosaved in the browser (IndexedDB) and can be saved as a .nerulio file.

Does it need Aseprite or an engine plugin installed?

No. .aseprite files are read and written in the browser, and each engine bundle carries what that engine needs (for Godot, the import settings and scene; for Unity and the Godot TileSet, a small editor script).