Frames & timeline
Frames are independent slices of your project. Each frame has its own layer stack, pixel buffers, and a default playback duration. The Frames timeline at the bottom of the editor lets you add, reorder, rename, duplicate, and delete frames.
Where to find it
The bottom strip — always visible. When the Preview Window is docked, the timeline shares space with it via a resizable divider.
Anatomy of a frame thumbnail
| Element | What |
|---|---|
| Thumbnail | Live render of the frame's composed layers (drag handle for reorder) |
| Index | 1., 2., … |
| Name | Single-click activates; double-click renames |
| Duration badge | 100ms — click to edit (10–60000 ms) |
| × button | Appears when filtering by sprite — removes the frame from the sprite (frame stays in the project) |
The active frame is highlighted in purple.
Header buttons
Top of the timeline:
| Button | Action |
|---|---|
| + | Add a new blank frame at the end |
| Copy | Duplicate the active frame (clones all layers + buffers) |
| Trash | Delete the active frame (disabled when only one remains) |
| Sparkles | Open the Frame Interpolation dialog |
| Grid2x2 | Open the Auto-tile 47 dialog (expand the active frame into a 47-tile set) |
| GitCompare | Toggle the frame diff overlay (Shift+D) — paints removed pixels red, added pixels green, and changed pixels yellow on top of the canvas against a selectable comparison frame |
| Image | Open Import image as new frame — decode any PNG / JPG / WebP / GIF / AVIF as a new frame, with optional palette extraction (see Indexed mode) |
When a sprite is active, an extra + Active frame to sprite button shows up alongside a Sprite frames / All frames toggle — see Filtering by sprite below.
Per-frame duration
Each frame has a durationMs value (default 100). The badge below the thumbnail is editable inline — click, type a number, hit Enter. This duration is used:
- Animations seed each step's
durationMsfrom the frame's value when added. - The Preview Window uses it as the default tempo when playing through frames.
Per-step durations on an animation override the frame's own duration — the frame value is the default seed, not authoritative.
Reorder
Hold + drag a thumbnail to move it. The timeline uses @dnd-kit/sortable and shows the new position before drop.
Heads up: Reordering does not chase frame identity for Frame tags. A tag covering "frames 2–5" still covers indices 2–5 even if the underlying frames moved. Aseprite-style positional tags. If you reorder, retarget tags explicitly.
Frame tags
Above the thumbnails is the Frame Tags bar — coloured ranges identifying named subsets of the timeline (e.g. walk-cycle, idle, attack).
Filtering by sprite
When you have an active sprite (docs), the timeline gets two view modes via the header toggle:
- Sprite frames (default) — show only the sprite's frames in normal style.
- All frames — widen the timeline to show every frame in the project; frames outside the active sprite render with a dashed border at 60% opacity so the boundary stays legible.
Three ways to add a free frame to a sprite (no more duplicate-and-reassign):
- Drag an out-of-sprite frame onto a sprite frame in "All frames" mode → the dropped frame is enrolled at the drop position.
- Right-click a frame → "Add to ". The symmetric "Remove from sprite" appears for in-sprite rows.
- × badge on a sprite-frame thumbnail hover → remove from sprite (the frame stays in the project).
Creating or duplicating a frame while filtering automatically enrols the new frame into the active sprite — no follow-up step needed.
Context menu and panel clipboard
Right-click any frame row for: Duplicate / Cut / Copy / Paste / Delete, plus the sprite-aware Add to / Remove from sprite entries when a sprite is active.
The Frames panel has its own clipboard scope (data-clipboard-scope="frames") so the panel-level shortcuts don't fight with the canvas-pixel clipboard:
| Key | Action |
|---|---|
Ctrl+C | Copy the focused frame as a snapshot (clone of pixels + metadata — survives deleting the source) |
Ctrl+X | Cut |
Ctrl+V | Paste — adds a new frame from the most recent copy/cut |
Delete | Delete the focused frame |
Tab into the timeline (or click a row) to give the panel keyboard focus first. The same scope exists on the Layers panel.
Tips
- Frame insertion automatically expands tag ranges that contain the insertion point. Frames inserted between tag boundaries don't disrupt tags.
- Frame deletion shrinks tags that overlapped the deleted frame; tags whose only frame was deleted disappear entirely.
- Use duplicate as a fast way to base a new frame on the previous one — then edit the differences. Combined with onion skin, this is the standard "tween manually" workflow.
- For quicker bulk in-betweens, see Frame interpolation.