# Timeline
<img src="https://assets.docs.lottiefiles.com/static/f920552ade-640.webp" srcSet="https://assets.docs.lottiefiles.com/static/f920552ade-640.webp 640w, https://assets.docs.lottiefiles.com/static/f920552ade-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/f920552ade-1920.webp 1920w" alt="Timeline interface" width="3840" height="2160" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAABYlAAAWJQFJUiTwAAAArElEQVR4nGOQVtX6z8Un8H/P7kP/r396/n/z/r3/uXkE/kupaP538o/4xyAqr/hfgIf//+pjh/6H3pz7f/GRXf/5Ofn+i8op/HfyC//PIKak9l9YSvZ/blPz/4TOqv+59Q3/BaXl/kuoa4FM+M8gq6H3X9XK7r+shc1/eUun/7Lm1v/VHFz+qzm6/ncOifvP4B6a8N89OO6/R1jif8eYrP+eYYlgPgh7hyf9AwAnNEx/hkn40AAAAABJRU5ErkJggg==" />

The Timeline is the control center for your animations in Lottie Creator. It displays your layers, keyframes, and provides tools for controlling playback and timing.

## Timeline Interface

The Timeline is located at the bottom of the Lottie Creator interface and consists of several key areas:

### Layout Structure

```
┌─────────────┬─────────────────────────────────────────────┐
│             │         Time Scale (seconds)                │
│   Layer     ├─────────────────────────────────────────────┤
│   Sidebar   │                                             │
│             │         Keyframe Panel                      │
│   (36px)    │    (Layer rows with keyframes)              │
│             │                                             │
└─────────────┴─────────────────────────────────────────────┘
```

### Timeline Components

**1. Layer Sidebar (Left)**

<List type="bullet">
  <ListItem>Scene management controls</ListItem>
  <ListItem>Segment controls</ListItem>
  <ListItem>Layer visibility toggles</ListItem>
  <ListItem>Lock/unlock layer controls</ListItem>
</List>

**2. Layer Panel (Center-Left)**

<List type="bullet">
  <ListItem>Layer names and hierarchy</ListItem>
  <ListItem>Expandable/collapsible layer tree</ListItem>
  <ListItem>Property tracks nested under layers</ListItem>
  <ListItem>Tree lines showing parent-child relationships</ListItem>
  <ListItem>Toggle between "Source" and "Layers" view</ListItem>
</List>

**3. Time Scale (Top)**

<List type="bullet">
  <ListItem>Slider allows zooming and traversing the timeline</ListItem>
  <ListItem>Shows seconds with frame subdivisions</ListItem>
  <ListItem>Dynamic tick marks based on zoom level</ListItem>
</List>

**4. Keyframe Panel (Center-Right)**

<List type="bullet">
  <ListItem>Visual representation of keyframes as diamonds</ListItem>
  <ListItem>Orange playhead (scrubber) indicator</ListItem>
  <ListItem>Draggable keyframes</ListItem>
</List>

## Playhead and Scrubbing

The playhead (also called scrubber) is the orange vertical line indicating the current frame.

### Using the Playhead

**Move Playhead:**

<List type="bullet">
  <ListItem>**Click** on time scale to jump to that frame</ListItem>
  <ListItem>**Drag** the orange playhead handle</ListItem>

  <ListItem>
    **Keyboard shortcuts** for precise navigation:

    <List type="bullet">
      <ListItem>`Home` - Jump to first frame (0)</ListItem>
      <ListItem>`End` - Jump to last frame</ListItem>
      <ListItem>`Page Down` - Next frame</ListItem>
      <ListItem>`Page Up` - Previous frame</ListItem>
      <ListItem>`Shift + Page Down` - Forward 10 frames</ListItem>
      <ListItem>`Shift + Page Up` - Back 10 frames</ListItem>
    </List>
  </ListItem>
</List>

**Scrubbing Features:**

<List type="bullet">
  <ListItem>**Shift + Drag playhead** - Snaps to visible keyframes</ListItem>
  <ListItem>**Frame number display** - Shows current frame while dragging</ListItem>
  <ListItem>**Frame width highlighting** - Visual feedback when zoomed in</ListItem>
</List>

### Jump to Keyframes

Navigate between keyframes efficiently:

**Shortcuts:**

<List type="bullet">
  <ListItem>**J** - Jump to previous keyframe</ListItem>
  <ListItem>**L** - Jump to next keyframe</ListItem>
</List>

Works across all layers and properties, finding the nearest keyframe in either direction.

## Playback Controls

Control animation playback directly from the timeline or preview panel.

### Play/Pause

**Toggle Playback:**

<List type="bullet">
  <ListItem>Press **Space** to play/pause</ListItem>
  <ListItem>Click play button in preview controls</ListItem>
</List>

**Playback Behavior:**

<List type="bullet">
  <ListItem>Plays from current playhead position</ListItem>
  <ListItem>Respects work area boundaries (loops within work area)</ListItem>
  <ListItem>Maintains consistent frame rate (default 30 FPS)</ListItem>
  <ListItem>Automatically pauses at end (unless looping)</ListItem>
</List>

### Loop Mode

**Enable Looping:**

<List type="bullet">
  <ListItem>Toggle loop button in preview controls</ListItem>
  <ListItem>When enabled, playback returns to work area start upon reaching end</ListItem>
  <ListItem>Works with both full timeline and work area ranges</ListItem>
</List>

## Work Area

The work area defines a specific range of your timeline for focused playback and export.

### Setting Work Area

**Visual Indicator:**

<List type="bullet">
  <ListItem>Adjustable start and end sliders</ListItem>
  <ListItem>Drag sliders to set range</ListItem>
</List>

**Keyboard Shortcuts:**

<List type="bullet">
  <ListItem>`Cmd/Ctrl + Opt/Alt + [` - Set work area start to playhead</ListItem>
  <ListItem>`Cmd/Ctrl + Opt/Alt + ]` - Set work area end to playhead</ListItem>
</List>

**Manual Setting:**

<List type="bullet">
  <ListItem>**Alt + Drag** on time scale to shift work area</ListItem>
  <ListItem>Drag start/end handles to adjust</ListItem>
</List>

### Work Area Operations

**Context Menu Options:**
Right-click on work area for operations:

<List type="bullet">
  <ListItem>**Set as Segment** - Save range as named segment</ListItem>
  <ListItem>**Trim Scene to Work Area** - Cut timeline to work area range</ListItem>
  <ListItem>**Reset Work Area** - Remove work area limits</ListItem>
</List>

**Using Work Area:**

<List type="bullet">
  <ListItem>Limits playback to specified range</ListItem>
  <ListItem>Useful for previewing specific sections</ListItem>
  <ListItem>Can create multiple segments from different work areas</ListItem>
</List>

## Timeline Zoom and Pan

Control timeline visibility to work efficiently at different scales.

### Zooming the Timeline

Zoom in to fine-tune keyframe spacing, or zoom out for a full view of your animation's timing.

**Methods:**

<List type="bullet">
  <ListItem>`Cmd/Ctrl + +` — Zoom in (more detail, fewer frames visible)</ListItem>
  <ListItem>`Cmd/Ctrl + -` — Zoom out (less detail, more frames visible)</ListItem>
  <ListItem>**Scroll wheel** while hovering over the time scale — zoom centered on cursor position</ListItem>
  <ListItem>**Pinch gesture** on trackpad — zoom in and out</ListItem>

  <ListItem>
    **Drag the zoom slider** on the time scale — drag the ends of the slider to zoom, drag the middle to pan
  </ListItem>
</List>

**Zoom behavior:**
Zooming is centered around the current playhead position, so your point of focus stays in view as you zoom in or out.

### Panning the Timeline

**Horizontal Scrolling:**

<List type="bullet">
  <ListItem>Drag the scrollbar below the keyframe panel</ListItem>
  <ListItem>Two-finger swipe horizontally on trackpad</ListItem>
  <ListItem>**Middle-click + drag** on the keyframe panel</ListItem>
  <ListItem>Drag the middle of the zoom slider on the time scale</ListItem>
</List>

## Layer Rows and Hierarchy

The timeline displays layers in hierarchical rows.

### Layer Display

**Hierarchy Visualization:**

<List type="bullet">
  <ListItem>**Tree lines** connect parent and child layers</ListItem>
  <ListItem>**Indentation** shows nesting level</ListItem>
  <ListItem>**Expand/collapse** to show/hide child layers and properties</ListItem>
</List>

**Expanding Layers:**

<List type="bullet">
  <ListItem>**Click arrow** next to layer name</ListItem>
  <ListItem>**Arrow keys** to expand/collapse selected layer</ListItem>
  <ListItem>Reveals property tracks (Position, Scale, Rotation, etc.)</ListItem>
</List>

### Property Tracks

When layers are expanded, property tracks appear nested underneath:

**Property Track Display:**

<List type="bullet">
  <ListItem>Each animated property gets its own row</ListItem>
  <ListItem>Property name on left (e.g., "Position", "Opacity")</ListItem>
  <ListItem>Only animated properties shown by default</ListItem>
  <ListItem>Expand/collapse properties individually</ListItem>
</List>

## Frames

**Frame Duration:**

<List type="bullet">
  <ListItem>Calculated as `1000 / fps` milliseconds</ListItem>
  <ListItem>Affects playback timing precision</ListItem>
  <ListItem>Doesn't change timeline display (always shows seconds)</ListItem>
</List>

### Scene Controls

The header tabs allow scene navigation.

<List type="bullet">
  <ListItem>Shows active scene name</ListItem>
  <ListItem>Click to open scene selector</ListItem>
  <ListItem>Switch between scenes quickly</ListItem>
</List>

### Segment Management

**Segments:**

<List type="bullet">
  <ListItem>Named ranges of your timeline</ListItem>
  <ListItem>Create from work area</ListItem>
  <ListItem>Quick access to specific animation sections</ListItem>
</List>

### Layer Row Context Menu

**Layer Operations:**

<List type="bullet">
  <ListItem>Show/hide layer</ListItem>
  <ListItem>Lock/unlock layer</ListItem>
  <ListItem>Rename layer</ListItem>
  <ListItem>Delete layer</ListItem>
</List>

### Preview

**Quick Preview:**

<List type="bullet">
  <ListItem>Set work area around section of interest</ListItem>
  <ListItem>Enable loop for repeated viewing</ListItem>
  <ListItem>Adjust playback speed as needed</ListItem>
</List>

**Full Animation:**

<List type="bullet">
  <ListItem>Reset work area for full timeline playback</ListItem>
  <ListItem>Verify overall timing and flow</ListItem>
  <ListItem>Check transitions between sections</ListItem>
</List>