Timeline & Keyframes
Control time — add keyframes, scrub the playhead, and bring your animation to life.
The timeline is where your animation takes shape. Each layer gets its own track, and each track can hold keyframes — snapshots of a layer’s drawing at a specific frame.
Timeline Controls
The timeline control bar at the top provides:
| Control | Function |
|---|---|
| ⏮ Skip Back | Jump to frame 1 |
| ◀ Previous Frame | Step back one frame |
| ▶ Play / ⏸ Pause | Toggle animation playback |
| ▶ Next Frame | Step forward one frame |
| Frame Counter | Shows current frame / total frames (e.g. 003/24) |
| Time Display | Shows seconds:frames at current FPS |
| ◆ Add Keyframe | Insert a keyframe at the current playhead position |
| Onion Skin Toggle | Show/hide ghost frames from adjacent keyframes |
Scrubbing the Playhead
Click anywhere on the time ruler (the numbered strip at the top of the timeline) to jump to that frame. Click and drag to scrub through frames in real time.
The red playhead marker shows the current frame across all layer tracks.
Playback
Press Play to start animation playback. Chuzy advances frames at the project’s FPS rate (default: 12 fps). Playback loops by default — toggle the loop setting in the playback controls.
Playback uses requestAnimationFrame for smooth, frame-accurate timing.
Keyframes
A keyframe is a drawing snapshot tied to a specific frame number. When the playhead reaches that frame, the keyframe’s canvas is displayed.
How Keyframes Work
- Each keyframe “owns” its own canvas — an independent set of strokes.
- A keyframe is displayed from its frame number until the next keyframe on that layer.
- If no keyframe exists at the current frame, Chuzy shows the most recent keyframe before it.
- Frames before the first keyframe show nothing for that layer.
Adding Keyframes
- Move the playhead to the desired frame.
- Click the ◆ diamond button in the timeline controls, or
- Right-click a layer track at the desired frame → Add keyframe.
Removing Keyframes
- Right-click a keyframe diamond on the track → Remove keyframe.
- Right-click a track at a frame with a keyframe → Remove keyframe from the context menu.
Keyframe Indicators
- Diamond markers on the track show keyframe positions.
- Bar extents between diamonds show the range each keyframe covers.
- Filled/highlighted bars indicate keyframes with strokes; empty bars are blank keyframes.
Setting Duration and FPS
In the Properties Panel (right sidebar):
- Frames: Total number of frames in the project (default: 24).
- FPS: Frames per second for playback (default: 12). Range: 1–60.
Track Interactions
| Action | How |
|---|---|
| Select layer + set frame | Click anywhere on a track |
| Add keyframe at frame | Right-click track → Add keyframe |
| Remove keyframe | Right-click keyframe diamond → Remove keyframe |
| Go to frame | Right-click track → Go to frame |
| Resize timeline | Drag the grip handle at the top of the timeline panel |
Tip
Start with a keyframe at frame 1 for your rough pose, then add keyframes at the extremes of your motion. Fill in breakdown frames between them.