Timeline Controls
The timeline is the main workspace for managing your animation. The transport bar at the bottom provides playback, timing, and zoom controls.
Playback controls
Section titled “Playback controls”The transport controls are grouped in the center of the transport bar:
- Skip to start — jump the playhead to 0%
- Play / Pause — start or stop playback (keyboard shortcut: Space)
- Skip to end — jump the playhead to 100%
- Loop — toggle continuous looping; when active, playback restarts automatically at the end
- Return to start — when enabled, the playhead resets to 0% after playback finishes instead of staying at the end position
- Iterations — when loop is enabled, a count input appears next to the loop button. It defaults to ∞ (infinite looping). Drag or click the input to set a specific number of iterations (2–100). Values below 2 revert to infinite
Playhead
Section titled “Playhead”The playhead is the vertical line on the timeline that marks the current position. You can control it in several ways:
- Drag the playhead handle along the timeline ruler
- Click anywhere on the ruler to jump to that position
- Type a precise value in the Playhead input in the transport bar (click to edit, Enter to confirm)
The playhead position is shown in the transport bar as either seconds or percentage, depending on the display mode.
Display mode
Section titled “Display mode”Click the s / % button in the transport bar to toggle between:
- Seconds — playhead and ruler display time in seconds (e.g.,
1.50s) - Percent — playhead and ruler display percentage (e.g.,
50.0%)
This also changes the grid interval options to match the selected unit.
Duration
Section titled “Duration”The Duration input in the transport bar shows and controls the total animation duration in seconds. Click to type a value, or drag to adjust. The minimum duration is 0.1s and the maximum is 60s.
Snap to grid
Section titled “Snap to grid”The Snap button toggles grid snapping on and off. When active, dragging keyframes will snap to the nearest grid line.
The grid interval dropdown next to the Snap button lets you choose the grid spacing. The available options depend on the current display mode:
Seconds mode: Auto, 0.01s, 0.1s, 0.25s, 0.5s, 1s
Percent mode: Auto, 1%, 5%, 10%, 25%
Auto adjusts the grid interval based on your current zoom level.
The zoom controls are on the right side of the transport bar:
- Fit button — resets the zoom so the entire animation fits in the visible timeline area
- Zoom slider — drag to zoom in (up to 600%) or out (down to 25%)
- Zoom percentage — displays the current zoom level
You can also zoom by holding Ctrl (or Cmd on Mac) and scrolling the mouse wheel over the timeline. Ctrl+scroll zoom anchors to the playhead position — the playhead stays visually in the same spot while the timeline scales around it.
Expand timeline
Section titled “Expand timeline”The expand button (fullscreen icon) in the timeline header makes the timeline take up the full editor height, hiding the preview and code panels above. This is useful when working with many tracks. Click again to return to normal layout.
The reset button (restart icon) in the timeline header resets the entire project to its default state. This clears all elements, tracks, keyframes, and configuration. A confirmation dialog appears before the reset is applied.