BaipixStarOpen the editor

Pixel art animation

Pixel art animation

Baipix has a timeline under the canvas: frames you add, reorder and time one by one, onion skin to see the frames around, and playback as you draw. Then export it as an animated GIF.

Open the editor The tools
  1. 260 ms
  2. 90 ms
  3. 80 ms
  4. 80 ms
  5. 60 ms
  6. 60 ms
  7. 70 ms
  8. 110 ms
  9. 70 ms
  10. 60 ms
  11. 60 ms
  12. 80 ms
  13. 70 ms
  14. 70 ms
A slime drawn and animated in Baipix: 14 frames, 1220 ms in all. The squash before the jump and the hang at the top hold longest. Open the editor to play it and change it.

The tools

Frames, under the canvas.

The timeline

Animate, or Shift+A, opens it under the canvas: one row per layer, one column per frame. Click a cell to draw there.

New frames from the last

Alt+N adds a frame that copies the one you're on, so you only redraw what moves; Alt+B an empty one that keeps the scenery. Drag frames to reorder them, Shift-click to pick several.

A duration per frame

Each frame shows for as long as you set, from 10 ms to 10 s. Hold the key poses, flash the fast ones.

Play as you draw

Enter or a tap on Space plays and pauses, comma and period step through the frames. The preview panel plays along, at its own size.

Onion skin

See where it comes from.

Frame 5 of 14

The onion skin shows the frames around the one you draw, faded under it: red for the ones before, blue for the ones after. Up to five on each side, fainter the further they are, with the opacity you pick.

Step through the slime's jump here: the red shows where it's coming from, the blue where it's going. On the squash, the blue already rises; at the top, red and blue almost meet, so the hang reads.

Turn it on from the timeline. It never ends up in an export, it's only there to draw by.

Export

An animated GIF, ready to share.

Every frame, its timing

The GIF keeps each frame's duration, loops forever, and keeps the drawing's exact colors.

Sharp at any size

Pixel size from 1× to 32×, with the pixel gap if you use one. No blur, the pixels stay square.

Transparent or not

With the board's background, or without it, for a sprite on any page.

Or frame by frame

A sprite sheet with its JSON for a game engine, a PNG sequence, one file per frame, or an .aseprite file with every frame, to finish it there.

How to start

From one pose to a loop.

  1. 1

    Draw the first pose

    The background on its own layer, the character on others. Only the layers that move change from frame to frame.

  2. 2

    Add the key frames

    Alt+N copies the frame, then move or redraw what changes. Turn on the onion skin to keep the motion even.

  3. 3

    Time it and export

    Press Enter to watch it loop, adjust the durations until it feels right, then export a GIF.

Tips

Lively pixel art animation.

Squash and stretch

Flatten before a jump, stretch on the way up and down. The slime keeps the same amount of green.

Few frames, good timing

Four well-timed frames read better than twelve even ones. Change durations before adding frames.

Anticipate

A small move the other way before the big one: down before up, back before a throw.

Loop cleanly

The last frame should lead back into the first. Watch the loop a few times with Enter.

Every frame command is in the animation docs. To bring a frame into a design, seePixel art to SVG.

Questions

Common questions.

Can I make pixel art animations in the browser?

Yes. Baipix has a timeline under the canvas: add frames, set how long each one shows, play it back, then export an animated GIF. It runs in your browser, with nothing to install.

How many frames does a pixel art animation need?

Fewer than you think. A walk cycle often has 4 to 8 frames, an idle loop 2 to 4. The slime on this page jumps in 14, some held longer than others.

Can each frame have its own duration?

Yes. Every frame has its own duration in milliseconds, so a pose can hold while the fast moves flash by. The GIF, the sprite sheet and the .aseprite file keep them.

What is onion skinning?

Showing the frames before and after the one you draw, faded under it, so you can see where things come from and where they go. Baipix tints them red before and blue after.

Can I use the animation in a game?

Frames + sprite sheet puts every frame on one PNG, with a JSON giving each one's place and duration, which Phaser, Unity or Godot read. A PNG sequence exports every frame as its own PNG, in a .zip. An .aseprite file keeps every frame with its duration, to finish it in Aseprite.

Is it free?

Yes. Baipix is free and open source (MIT). It runs in your browser, with no account, and your drawings stay on your device.

Draw your first pixel.

Free and open source, under the MIT license. No account, and your drawings stay on your device.

Open the editorRun it locally