Use Timeline Panel

Overview

The editor includes a bottom Timeline Panel for timeline-first animation editing.

For a fully interactive docs demo, open /docs/animation/live-demo-app.html.

UI Workflow

1. Open or create a timeline from the panel header.
2. Use Play/Pause and timeline zoom controls (-, +, Reset) to adjust the view.
3. Click a track label to focus it.
4. Click a keyframe to select it, Cmd/Ctrl+Click to add/remove from selection.
5. Drag selected keyframes to move them together on the same track.
6. Drag on empty track space to marquee-select keyframes in a time range.
7. Use Keyframe Curve Editor to set interpolation and easing for selected keyframes.
8. Toggle Record On to capture keyframes while editing canvas objects.
9. Use the State Machine section to create/edit inputs, states, and transitions.

Notes

• Batch keyframe drag uses editor.animation.moveKeyframes(...) and is recorded as a single timeline mutation.
• Curve edits use editor.animation.updateKeyframe(...) for each selected keyframe.
• Record mode auto-creates missing tracks for changed animatable properties.
• State machine edits call validated APIs (add/update/remove for input/state/transition).
• State transitions support optional priority for deterministic conflict handling.
• step interpolation ignores easing by design.
• Playhead edits continue to use validated animation APIs and timeline duration clamping.