Playback Controls
Preview animations with optimized playback that pre-computes all frame composites for smooth 60 FPS rendering.
Controls
The playback controls are located in the timeline toolbar:
| Control | Shortcut | Action |
|---|---|---|
| Play/Pause | Space | Start or stop playback |
| Previous frame | , (comma) | Step back one frame |
| Next frame | . (period) | Step forward one frame |
| First frame | Shift+, | Jump to frame 0 |
| Last frame | Shift+. | Jump to last frame |
| Loop toggle | (click) | Enable/disable looping |
Frame Rate
The project frame rate determines playback speed and export timing.
| Setting | Range | Default |
|---|---|---|
| Frame Rate | 1–60 FPS | 12 FPS |
Common frame rates:
| FPS | Use Case |
|---|---|
| 1–4 | Slideshows, dramatic reveals |
| 8–12 | Standard ASCII animation |
| 15–24 | Smooth character animation |
| 30–60 | Fast motion, professional output |
Changing frame rate adjusts playback speed but preserves the frame count. The total animation duration changes accordingly.
Work Area
Constrain playback to a sub-range of the timeline:
Click Clear to remove work area constraints and play the full timeline.
Pre-Computed Playback
When you press play:
- All visible layers are composited at every frame in the play range
- The composited frames are stored in a lookup table
- A
requestAnimationFrameloop syncs to the project FPS - Frames render directly to the HTML canvas, bypassing React
This approach ensures smooth playback even with complex multi-layer compositions.
The pre-computation step happens at play start. For long animations with many layers, there may be a brief delay before playback begins.
When Effects Are Active
If procedural effects are present, frames may be composited on-demand rather than pre-computed, as some effects (Wave Warp, Wiggle) are time-dependent and produce unique output per frame.
Looping
- Loop On — Animation restarts from the beginning (or work area start) after reaching the last frame
- Loop Off — Animation plays once and stops on the last frame
Integration
Onion Skinning
Onion skinning automatically disables during playback and re-enables when you pause. No manual toggling needed.
Export
What you see during playback matches all export formats (video, GIF, HTML, image sequence). Frame rate and compositing are applied identically.
Auto-Save
Projects auto-save during playback. Playback state is not persisted — projects always open paused at frame 0.