The Timeline
The timeline sits at the bottom of the editor and is the control centre for all animation in your design. Every animated object appears as a track, with keyframe markers plotted along the time axis. The scrubber shows where you are in time.
Playback controls
| Control | What it does |
|---|---|
| Play / Pause | Start or stop playback — the canvas animates live as it plays |
| Skip to start | Jump the scrubber back to the very beginning (frame 0) |
| Step backward | Seek back 1 second |
| Step forward | Seek forward 1 second |
| Mode toggle | Switch between play-once and continuous looping during preview |
Step backward/forward jump by a fixed 1 second, not one frame — regardless of the current FPS.
Time display
Both the current time and total duration are shown as MM:SS.mmm, including milliseconds for sub-second precision.
Both are editable: click on either field, type a new value, and press Enter to jump to that time. This is much faster than dragging the scrubber when you need to go to a specific moment.
Frame rate (FPS)
Click the FPS indicator to cycle through the available frame rates:
24 → 25 → 30 → 50 → 60 → back to 24
| FPS | Common use |
|---|---|
| 24 | Cinematic look |
| 25 | European broadcast (PAL) |
| 30 | North American broadcast (NTSC) |
| 50 | HD European broadcast |
| 60 | High-frame-rate HD, smooth motion |
Match the FPS to your broadcast or playout system. For most European broadcast workflows use 25fps, for North American use 30fps. Mismatched frame rates can cause subtle timing issues in playout.
Duration
Set the total length of your animation in the duration field. This defines the end point of the timeline. Any keyframes beyond this point will not play.
Clip duration
Each object has its own clip — a coloured bar on its track showing when it appears and disappears within the total timeline duration. An object doesn't have to span the whole animation.
- Drag the middle of a clip to move it earlier or later, keeping its length.
- Drag the left or right edge to trim where it starts or ends independently. A clip can't be shorter than 100ms.
- Both are clamped to the timeline's total duration — you can't drag a clip start earlier than 0 or an end later than the total duration.
Resizing a Frame's clip affects its children too — their relative timing is clamped so none of them can extend past the Frame's new end point.
Scheduled vs. Operator-driven
Every object on the timeline is in one of two modes:
| Scheduled | Operator-driven | |
|---|---|---|
| Visibility comes from | Its clip window and keyframes | The operator, live, from the control app |
| Clip | Trimmable, positioned wherever you place it | Locked to the full timeline duration — can't be moved or trimmed |
| Keyframes | Kept | Cleared the moment you switch to Operator-driven |
| When the graphic goes on-air | Plays automatically per its clip and keyframes | Starts hidden — stays off until the operator shows it |
This is a per-object toggle, not something tied to specific widget types — a shape, a block of text, a Frame, or a Timer can each independently be Scheduled or Operator-driven.
Switching modes
In the timeline tree (the object list on the left of the timeline dock, not the clip bar itself), each row has a small icon next to its name: a clock (Scheduled) or a lightning bolt (Operator-driven). Click it to toggle.
Switching an object to Operator-driven deletes its existing keyframes and clip timing — there's no undo for that data once you switch back. If you're experimenting, duplicate the object first.
Examples
- A lower-third bar that slides in, holds, and slides out on cue — leave it Scheduled. Its appearance is choreographed to a fixed moment in the show.
- A live score Counter that changes unpredictably during a match — mark it Operator-driven. Its value shouldn't be tied to a scheduled clip; an operator updates it whenever the score changes, for as long as the graphic is on-air.
- A "Score Bug" Frame containing a background shape, two team Counters, and a match Clock — mark the Frame itself Operator-driven rather than each child individually. Every child inherits operator-driven behavior from its parent Frame automatically. A child can still be marked explicitly on top of that inheritance; doing so has no visible effect while nested, but the explicit mark sticks if that child is later unwrapped from the Frame — otherwise it would silently revert to Scheduled.
Finding operator-driven objects
Once at least one object is Operator-driven, an Instruments strip appears just below the timeline, listing every operator-driven object (including ones nested inside a Frame) by icon. Click an entry to select it on the canvas — a shortcut for finding one without hunting through the timeline tree.
Timeline zoom
Use the zoom slider and In / Out / Fit buttons to scale the timeline view. Zooming in gives you finer control when placing keyframes close together. Zooming out helps you see the whole animation at a glance.
Use Fit to instantly snap the zoom level so your entire animation duration fills the visible timeline. It's the fastest way to get your bearings when working on longer sequences.