All tutorials
Step 3 · Ship a PNG, a sprite sheet or a loopIntermediate8 min

Animate a looping sequence

Order frames, give each one its own duration, check the motion with onion skin, and export a GIF or a sheet.

You finish with

A looping GIF plus a sprite sheet, or a multi-frame project back in the editor.

  1. 1

    Assemble the frames in order

    Drop same-size PNGs in and reorder until the motion reads. Two-frame animations (idle bobs, blinking) carry enormous amounts of personality for the effort involved.

    Open animation maker
  2. 2

    Give each frame its own duration

    Uniform timing looks mechanical. Held frames — the pause before a strike, the squash before a jump — are where animation actually lives. Each frame carries its own duration and the total loop length updates live.

  3. 3

    Check the pose relationship with onion skin

    Onion skin ghosts the previous frame at low opacity so you can see whether pixel 12 of frame 2 actually relates to pixel 12 of frame 1. Drift is invisible in playback but obvious here.

  4. 4

    Export GIF for the web, sheet for the engine

    GIF loops are for previews, docs and itch pages (one transparent color, minimum frame delay 20 ms). Sprite sheets are what the game reads. Export both — they come from the same frames.

    Need to fix pixels afterward? “Continue in editor” hands the whole multi-frame sequence back as an editable project.