Hands-on workshopIntermediate8 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.

01What you will learn

Arrange poses into a readable loop.
Use frame duration to control rhythm.
Export the right format for a preview and a game engine.

Start with: At least two same-size poses of a character or object. Duplicate a frame in the editor and make a small change to get started.

02See the technique

What gets in the way

Evenly timed frames and a large jump from the final pose to the first can make a loop feel mechanical or broken.

The useful change

Hold the important poses a little longer, compare neighboring frames with onion skin, and watch the last-to-first transition as carefully as the middle.

03Follow the steps

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
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
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
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.

04Practice in Pikanim

Open a tool, follow the steps with your own asset, and come back when your result is ready.

Animation Maker Pixel Art Editor

05Check your result

Compare your own work with these checkpoints. Check each one when your result is ready.

My last frame transitions smoothly back to the first.I previewed the loop and adjusted each frame's duration deliberately.I exported a GIF preview and a sprite sheet, or saved the editable multi-frame project.

0 of 3 checked

Progress saves in this browser. No account needed.

06Continue learning

Keep making

Choose your next project

Explore another workshop or revisit your course.

Your saved projects

Pick up the asset you made and keep building.

02See the technique

What gets in the way

Evenly timed frames and a large jump from the final pose to the first can make a loop feel mechanical or broken.

The useful change

Hold the important poses a little longer, compare neighboring frames with onion skin, and watch the last-to-first transition as carefully as the middle.

03Follow the steps

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

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.

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.

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.

05Check your result

Compare your own work with these checkpoints. Check each one when your result is ready.

0 of 3 checked

Progress saves in this browser. No account needed.