Timeline Reference

The Timeline editor is the visual interface for creating and editing keyframe animations. It opens at the bottom of the editor when you press T or click Open Timeline in the Inspector's Animation section.

Layout

┌──────────────────────────────────────────────────────────────────┐
│  Clip selector │ ● Rec │ ◀ ▶ ▶▶ │ 00:00 │ Loop │ Settings      │
├──────────┬─────┴──────────────────────────────────────────────────┤
│ Property │    0    10    20    30    40    50    60    70    80   │
│ tracks   ├────────────────────────────────────────────────────────│
│          │  ●─────────────────●                                  │
│          │  ●────────●                                           │
└──────────┴────────────────────────────────────────────────────────┘

Toolbar controls

Control	Description
Clip selector	Dropdown to switch between animation clips on the selected object
+ New Clip	Create a new empty animation clip
● Record	Toggle record mode — changes to the object auto-create keyframes
◀	Jump to start (frame 0)
▶	Play / Pause
▶▶	Play at double speed
Time display	Shows current time as `MM:SS:FF`; click to enter a frame number directly
Loop toggle	Enable/disable looping for the active clip
Settings	Open clip settings (duration, loop mode, play-on-load)

Track area

Scrolling and zooming

Scroll wheel — zoom the time axis in / out.
Middle-mouse drag — pan left / right along the timeline.
Ctrl + Scroll — zoom the property track list vertically.

Track header

Left of the time ruler, each row shows:

Property name — the animated property (e.g. Position X, Opacity).
Value field — the current value at the playhead position; click to type a precise value.
Visibility toggle (eye) — show/hide keyframe diamonds for this track without deleting them.
Lock toggle (padlock) — prevent accidental edits to this track.

Keyframe operations

Action	Input
Select keyframe	Click the diamond
Select multiple	Shift+click or drag-select
Move keyframe(s)	Drag horizontally
Duplicate	Ctrl+D
Delete	Delete or Backspace
Copy / Paste	Ctrl+C / Ctrl+V
Change interpolation	Right-click → Interpolation mode
Open Bezier editor	Click the curve icon on the keyframe

Clip settings

Open via the Settings button in the toolbar:

Setting	Description
Duration	Total length of the clip in frames or seconds
FPS	Frames per second (default: 30)
Loop mode	Once, Loop, Ping-Pong, or Clamp
Play on load	Automatically play this clip when the scene starts
Default clip	Mark this as the clip that plays first by default

Frame rate

The timeline uses the project's global FPS setting (default 30 FPS). To change it:

Editor → Project Settings → Animation → Frame Rate

Changing the FPS rescales all existing keyframes to keep timing consistent.

Markers

Add named markers on the timeline to mark important moments (e.g. "impact", "loop-start"):

Right-click on the time ruler.
Select Add Marker.
Name the marker.

Markers are reference points only — they do not affect playback unless accessed by a script:

import { getObject } from '@shapebox/api'

const obj = getObject('Character')
obj.animation.playFrom('loop-start') // seeks to the named marker

Dope Sheet vs Curve Editor

Toggle between two views using the icons in the top-right of the Timeline:

Dope Sheet (default) — shows keyframes as diamond shapes. Good for timing and retiming.
Curve Editor — shows animated values as continuous graphs. Good for fine-tuning easing and motion feel.