Skip to main content

​
Overview

The Timeline is the central panel for animation work in Aseprite. It displays all frames and layers in your sprite, allowing you to organize your animation structure and control playback.
The Timeline combines both frames (horizontal axis) and layers (vertical axis) in a single view, making it easy to manage complex animations.

​
Timeline anatomy

The Timeline consists of several key areas:

Frame headers

The top row shows frame numbers and allows you to select, add, and delete frames

Layer list

The left column displays all layers with visibility and lock controls

Cel grid

The main grid where each cell represents a cel (layer content at a specific frame)

Animation controls

Playback controls for previewing your animation directly in the timeline

​
Working with frames

​
Adding frames

Create new frames for your animation:
1

Add frame

Click the New Frame button (plus icon) in the timeline header, or press Alt+N (Windows/Linux) or Option+N (macOS).
2

Position new frame

The new frame is added after the currently selected frame by default.
-- Add frames programmatically with Lua scripting
local sprite = app.activeSprite
sprite:newFrame()

​
Selecting frames

Multiple selection techniques are available:
  • Single frame: Click on a frame header
  • Multiple frames: Ctrl+Click (Windows/Linux) or Cmd+Click (macOS) on frame headers
  • Range selection: Click and drag across frame headers, or Shift+Click to select a range
Selected frames appear highlighted in the timeline. All operations affect the selected frames.

​
Frame duration

Control how long each frame displays:
  1. Right-click on a frame header
  2. Select Frame Properties
  3. Set the duration in milliseconds
The default frame duration is 100ms. Adjust this for smoother or snappier animations.

​
Working with layers

​
Layer controls

Each layer in the timeline has several controls:
Toggle layer visibility on and off. Hidden layers are not included in exports unless explicitly enabled.
Lock layers to prevent accidental edits. Locked layers cannot be drawn on or modified.
Enable continuous layers to automatically link cels when copying frames.
Collapse layer groups to save vertical space in the timeline.

​
Layer hierarchy

Organize layers using groups:
  1. Right-click in the layer list
  2. Select New Layer Group
  3. Drag layers into the group to organize them
Collapse groups you’re not actively working on to keep your timeline clean and manageable.

​
Working with cels

Cels are the individual pieces of content that exist at the intersection of a layer and a frame.

​
Cel operations

Draw on a frame to automatically create a cel on the active layer. Empty frames show no cel indicator.

​
Cel selection

Select cels to perform batch operations:
  • Single cel: Click on a cel in the grid
  • Rectangular selection: Click and drag across multiple cels
  • Multiple layers/frames: Select entire rows (layers) or columns (frames)
Deleting a cel removes its content permanently. Use Edit → Undo (Ctrl+Z/Cmd+Z) if you delete by mistake.

​
Timeline range

Define a working range to focus on specific parts of your animation:
  1. Select frames or cels to define a range
  2. The selected range is highlighted with a colored outline
  3. Operations like Play, Export, or Reverse Frames apply only to the selected range

​
Range operations

Copy range

Ctrl+C / Cmd+C to copy selected cels

Paste range

Ctrl+V / Cmd+V to paste at the current position

Move range

Drag the selected range to reposition frames

Reverse range

Right-click and select Reverse Frames

​
Animation controls

Preview your animation directly in the timeline:
  • Play/Stop: Click the play button or press Enter
  • Loop: Toggle loop mode to repeat the animation continuously
  • Speed: Adjust playback speed with the speed slider
  • Go to first/last frame: Use the navigation buttons or Home/End keys
For a larger preview window with more controls, use the Preview Window.

​
Frame tags

Frame tags (also called animation tags) let you define named animation sequences within a single sprite:

​
Creating tags

1

Select frame range

Select the frames you want to include in the tag.
2

Create tag

Right-click on the frame header and select New Tag, or press Ctrl+Alt+T (Windows/Linux) or Cmd+Option+T (macOS).
3

Name the tag

Give your tag a descriptive name like “walk”, “idle”, or “attack”.
4

Set loop direction

Choose from Forward, Reverse, Ping-pong, or Ping-pong reverse.

​
Tag features

  • Color-coded: Tags display with customizable colors for easy identification
  • Multiple tags: Create overlapping or separate tags for different animation states
  • Export by tag: Export specific tags as individual sprite sheets or GIF files
Use descriptive tag names that match your game engine’s animation system for easier integration.

​
Onion skinning

View multiple frames at once to create smoother animations:
  1. Click the Onion Skin button in the timeline toolbar
  2. Adjust the number of previous and next frames to display
  3. Previous frames appear in red tint, next frames in blue tint (by default)

Previous frames

See where your animation came from

Next frames

Preview where your animation is going
Learn more in the Onion Skinning guide.

​
Timeline configuration

Customize the timeline to fit your workflow:

​
Timeline settings

Right-click in the timeline and select Timeline Options:
Enable cel thumbnails to see a preview of each cel’s content directly in the timeline grid.
Choose between 0-based or 1-based frame numbering.
Adjust the height of layer rows for better visibility or more compact layouts.
Drag the separator between the layer list and cel grid to adjust column widths.

​
Keyboard shortcuts

Speed up your timeline workflow:
ActionWindows/LinuxmacOS
New frameAlt+NOption+N
Delete frameAlt+DelOption+Del
Copy celsCtrl+CCmd+C
Paste celsCtrl+VCmd+V
Play/StopEnterEnter
Go to first frameHomeHome
Go to last frameEndEnd
Previous frame, (comma), (comma)
Next frame. (period). (period)
New tagCtrl+Alt+TCmd+Option+T
View all keyboard shortcuts with Help → Quick Reference or visit the Quick Reference.

​
Advanced features

​
Continuous layers

Enable the Continuous flag on background or base layers:
  • Automatically extends cels when creating new frames
  • Useful for static background layers or elements that don’t change across frames
  • Toggle with the film icon in the layer controls

​
Layer opacity animation

Animate layer opacity over time:
  1. Enable Timeline → Show Layer Opacity
  2. Click on the opacity curve in the timeline
  3. Adjust opacity keyframes for each frame
Layer opacity animation is a preview feature and may not be available in all Aseprite versions.

​
Empty frame indication

The timeline uses visual indicators to show frame states:
  • Filled cel: Contains unique content
  • Linked cel: Shares content with another frame (link icon)
  • Empty cel: No content on this layer at this frame

​
Best practices

Organize with groups

Use layer groups to separate foreground, character, and background elements

Name layers descriptively

Clear layer names like “head”, “body”, “shadow” make navigation easier

Use frame tags

Define animation sequences with tags for easier export and organization

Lock reference layers

Prevent accidental edits to reference art or backgrounds

​
Related topics

Layers Panel

Detailed layer management and properties

Preview Window

Real-time animation preview with playback controls

Animation Concepts

Learn the fundamentals of animation in Aseprite