Animation timeline

The Animation timeline is the bottom panel of the editor. It holds every interaction for turning a static asset into a frame- by-frame animation - the frame strip, playback controls, tag strip, and the layer-cel grid. The panel only appears once an asset has more than one frame (or you explicitly open it on a single-frame asset).

Read the Animation, frames, and cels page first if you haven’t - it covers how frames, layers, and cels fit together, which is what the timeline shows you in the editor.

Opening the timeline

Two entry points create the timeline:

• Top-bar Animate menu → Show Timeline - opens the timeline and adds frame 2 as a duplicate of frame 1 in one click. The standard path for starting an animation from a static asset.
• N keyboard shortcut - same effect. Adds a new frame on every press; the first press also opens the timeline on single-frame assets.

Once an asset has more than one frame, the timeline auto-shows the next time you open that asset, so opening an animated project always lands you looking at your frames. You can still hide the timeline manually mid-session via Animate → Hide Timeline or the × button on the right end of the timeline.

Two visibility states

The timeline is either visible or hidden, driven by the timeline-visible preference:

1. Hidden - the panel doesn’t render at all; the editor’s full vertical space goes to the canvas.
2. Visible - full panel with the tag strip, frame strip, optional layer-cel grid, and both control clusters.

The × icon on the right end of the mode cluster hides the timeline. To show it again, open Animate → Show Timeline or press N to add a frame (which auto-shows the panel). Switching to a different multi-frame asset also re-shows the timeline automatically.

Layout at a glance

The expanded panel reads left-to-right as:

[Transport cluster] · [Frame strip + "+" tile] · [Mode cluster]

Plus, when applicable:

• The Tag strip sits as a thin colored bar above the frame strip.
• The Layer-cel grid appears below the frame strip when toggled on.

Frame strip

Every tile in the strip is one frame. The active frame - the one you’re currently editing - has a teal border. Reading the tile:

• Top-left corner: frame number (1-indexed).
• Bottom edge: the frame’s playback duration in milliseconds.
• Center: a thumbnail of the composited frame (all visible layers blended together).

The strip scrolls horizontally when frames overflow. The trailing + tile is pinned outside the scroll, so adding frames in bulk never requires you to chase the button.

Frame interactions

• Click a frame to make it active.
• Drag a frame by its body to reorder. Tag ranges follow the reorder.
• Right-click a frame for Insert before, Insert after, Duplicate (linked-cel copy), Set duration, and Delete.

The + tile follows the strip’s right edge, regardless of how long the animation gets. Clicking it adds a new empty frame and makes it active. The new frame’s cels are empty on every layer; use Duplicate from the right-click menu instead if you want the new frame to carry forward content.

Adding, deleting, and reordering frames are all undoable with Cmd/Ctrl + Z, so a delete that took more than you meant is one keypress away from coming back. Deleting a frame that others were duplicated from doesn’t cost you their artwork - see linked cels in practice.

Transport cluster (left)

The left-side cluster handles playback:

• Previous / Next frame buttons - step one frame at a time (or press , / .).
• Play / Pause button - toggles playback. Also fires from the keyboard via Space whenever your cursor is over the timeline area; spacebar elsewhere on the canvas keeps its pan-hold behavior.
• Loop button - toggles whether playback wraps from the last frame back to the first.
• Readout - vertical stack showing the current frame’s effective frames-per-second and the active-frame index (current / total). Updates live as you scrub or play through.

The fps value honors the active tag’s optional fps override, so scoping to a tag with defaultFps: 30 shows 30 fps regardless of per-frame ms.

Mode cluster (right)

The right-side cluster handles configuration:

• Add tag (tag icon) - opens the tag popover.
• Onion skin (ghost icon) - opens the onion-skin popover. Lights up teal when onion skin is enabled.
• Layer rows (layers icon) - toggles the layer-cel grid below the frame strip. Shortcut: Shift + L.
• Animation tour (? icon) - launches the guided animation walkthrough. You can also reach it any time from Help → Show animation tour.
• Hide timeline (×) - hides the panel. Reopen via Animate → Show Timeline, or by pressing N to add a frame (which auto-shows the panel).

Tag strip

When an asset has at least one tag, the tag strip appears as a thin colored bar above the frame strip. Each tag is a horizontal segment spanning its from -> to frame range, tinted with the tag’s color.

• Click a tag to scope playback to its range. The playback clock loops within the tag’s frames and the layer-cel grid highlights the relevant columns.
• Click empty strip area to clear the active tag and resume full-range playback.
• Right-click a tag to open the edit popover - rename, recolor, change range, change direction (forward / reverse / ping-pong), or delete.

Adding a tag

Click the Add tag button in the mode cluster. The tag popover opens above the cluster with five fields:

• Name - usually a state label like idle, walk, attack.
• From / To - inclusive frame indices for the range.
• Color - hex picker; tints the strip bar.
• Direction - forward, reverse, or ping-pong.
• Fps override (optional) - overrides per-frame ms with a uniform rate when this tag is active.

Enter submits, Esc cancels. The new tag appears immediately in the strip; you can right-click it to refine any field.

Layer-cel grid

Toggle the layer-cel grid with the Layer rows button (or Shift + L). The grid appears below the frame strip:

• One row per layer - top-first, matching the layers panel on the right.
• One cell per frame - aligned vertically with the frame strip above.
• Active layer row is tinted teal so you can see which row matches the layers-panel selection.

Each cell shows a glyph indicating that cel’s kind:

Glyph	Cel kind	Meaning
Solid dot	Buffer	The layer has independent painted pixels at this frame.
Empty circle	Empty	No content (transparent) at this frame.
Chain icon	Linked	Shares pixels with another frame’s cel on the same layer.

Cel interactions

• Click any cel to jump straight to that (layer, frame) pair in the editor. The active layer + active frame both switch in one click.
• Right-click any cel to open the cel context menu:
  • Clear cel - wipe the cel back to empty.
  • Unlink cel - if it’s a linked cel, materialize the cel as an independent buffer cel with a clone of the source’s pixels. Future paints on this cel stay local.
  • Link to frame… - open a sub-list of every other frame on the same layer, with a small badge per row showing each candidate’s cel kind. Pick one to make this cel link to it.

The grid is capped at 192px tall (about 6 layer rows) - if your asset has more layers than that, the grid scrolls internally so the canvas stays the dominant chrome.

Onion-skin popover

Click the ghost icon in the mode cluster to open the onion-skin popover. Onion skin overlays adjacent frames as ghosts under the active frame, useful for drawing in-between poses:

• Pre / Post frames - how many frames before and after the active one render as ghosts. 0 / 0 is “off”; 1 / 1 shows the immediate neighbors; higher values give you a wider in-between window.
• Opacity - dial each side from 0 (invisible) to 1 (fully opaque). Most users settle around 0.3 - 0.5.
• Tint - color each side a different hue so you can tell past from future at a glance. Defaults are red for pre frames and green for post.
• Step - sample every other frame (2) or every third (3) instead of every consecutive frame. With Step 2 over 5 pre frames the overlays land on frames -2 and -4 relative to the active frame (instead of -1 through -5).
• Scope - choose Active layer or All visible layers. Active-layer onions ignore other layers (cleaner for character animation); all-visible onions show the full overlaid context.
• Order - whether onion overlays render behind or in front of the active frame. Behind is the default; in-front is useful when you want the onions to dominate the eye.

Onion skin is automatically suppressed during playback - the overlays would distract from the animation playing through.

Keyboard shortcuts

Animation-specific shortcuts:

• N - add new frame (or open the timeline on a single-frame asset).
• Space - play / pause when your cursor is over the timeline; pan-hold on the canvas elsewhere.
• , / . - step previous / next frame.
• Shift + , / Shift + . - jump to the previous / next tag’s start frame.
• Shift + L - toggle the layer-cel grid.
• Delete (over the timeline) - delete the active frame.

See the keyboard shortcuts reference for the full list.

Free vs Pro

The Free tier caps:

• 5 frames per asset. Adding the 6th frame opens the upgrade modal (from any entry point: + tile, N shortcut, right- click duplicate / insert).
• 1 tag per asset. Adding the 2nd tag opens the upgrade modal.

Pro removes both caps. See Free vs Pro for the full comparison.

The animation tour

The ? icon in the mode cluster launches a guided 11-step walkthrough of everything on this page - frames, transport, tags, layer-cel grid, linked cels, onion skin, and animated exports. The tour drives the popovers and toggles for you, so each step lands on the surface it’s describing.

You can also start the tour any time from Help → Show animation tour in the top bar.

Related

• Animation, frames, and cels - how frames, layers, and cels fit together
• Layers and blend modes - how layers stack and blend
• Keyboard shortcuts - full shortcut reference
• Export overview - GIF, APNG, and sprite-sheet exports