Chapter 10: Timeline Editor

The Timeline Editor controls when elements appear and disappear in your scenes. It provides a visual interface for choreographing element timing, adjusting durations, and managing keyframe animations.

Opening the Timeline

To show the Timeline panel:

Click Timeline in the top toolbar
The timeline appears at the bottom of the editor
Click again to hide it

The timeline shows all elements in the current scene with their timing represented as horizontal bars.

Resizing the Timeline

Drag the top edge of the timeline panel to make it taller or shorter. This gives you more room for scenes with many elements.

Timeline Components

Time Ruler

The horizontal ruler at the top shows time in seconds:

Major ticks every 5 seconds with labels
Minor ticks every second
Click or drag on the ruler to move the playhead

Playhead

The vertical red line indicates the current preview time:

Drag the playhead to scrub through the scene
Click on the ruler to jump to a specific time
Elements show their appearance at playhead position

Element Bars

Each element appears as a colored horizontal bar:

Left edge: When element appears (In Time)
Bar width: How long element is visible (Duration)
Right edge: When element disappears

Element Labels

The left column shows element information:

Visibility toggle (eye icon): Show or hide the element
Lock toggle (lock icon): Lock or unlock the element to prevent edits
Expand/collapse toggle: Reveal keyframe property rows (for elements with keyframes)
Element type icon: Identifies the element type
Element label: Smart labels based on content — filenames for images/videos, color name + shape type for shapes (e.g., “Guardsman Red Rectangle”), first 20 characters for text

The camera row

If the scene has a camera, a Camera row is pinned above the element rows, with its own keyframe lanes for position, look-at, and zoom. When the scene has no camera yet, the timeline’s toolbar offers a camera button to add one. See Chapter 23.

Audio rows

Audio layers and volume-adjustment layers appear as ordinary timeline rows — they have no canvas presence, so the timeline is where you place and trim them. Their volume lane is keyframable like any other property. See Chapter 22.

Element Timing

In Time

When an element first appears in the scene:

0 seconds: Appears immediately when scene starts
2 seconds: Appears 2 seconds into the scene
Drag the entire bar horizontally to change

Duration

How long the element remains visible:

Measured in seconds
999: Special value meaning “show indefinitely”
Drag the right edge of the bar to resize

Setting Timing

By Dragging:

Click and drag the bar to change In Time
Drag the right edge to change Duration

In Properties Panel:

Select the element
Open Properties panel
Enter In Time and Duration values

In Timing Dialog:

Click the timing icon (🕐) in element toolbar
Enter precise values
Click Save

Bar Colors

Element bars are color-coded by type:

Element Type	Color
Text	Blue
Image	Green
Video	Red
Shape	Amber
Table	Purple
List	Pink

Interacting with Bars

Selecting Elements

Click a bar to select that element
The element highlights on canvas
Double-click an element label to open the Properties sidebar for that element

Reordering Layers

Drag element labels vertically to reorder layers
The top element in the list renders on top (highest z-order)
A visual indicator shows where the layer will be placed

Moving Bars

Click and drag horizontally
The In Time updates as you drag
Release to set the new position

Resizing Bars

Hover over the right edge (cursor changes)
Drag left or right
The Duration updates as you drag

Expanding Rows

Click the chevron (▶) on elements with keyframes
Expanded view shows property animation rows
Each property has its own timeline with keyframe diamonds

Video Content Offset

Video elements have a special content bar showing when video content plays:

Understanding Content Offset

The outer bar is element visibility
The inner darker bar is video content
Content offset controls when video starts playing

Adjusting Content Offset

Hold Shift while dragging the content bar
The video content shifts within the element
Useful for syncing video to other elements

Example

Element In Time: 0s
Content Offset: 2s
Result: Element visible at 0s, video plays at 2s

Working with Keyframes

Keyframes enable property animation over time.

Viewing Keyframes

Click the expand arrow (▶) next to an element
Property rows appear below
Diamond icons show keyframe positions

Adding Keyframes

Position playhead at desired time
Click the diamond-plus icon (◇+)
Or change a property value to auto-create keyframe

Editing Keyframes

Drag diamonds horizontally to change timing
Select and modify values at each keyframe
Delete keyframes by selecting and pressing Delete

See Chapter 12: Animations and Keyframes for advanced animation.

Scrolling

Scroll horizontally to see later times
Timeline extends as needed for element timing

Zoom (Time Scale)

The default scale is 60 pixels per second:

Mouse wheel over the timeline to zoom in/out
Zoom in to see fine timing details
Zoom out for overview of longer sequences

Jumping to Times

Click on the time ruler to jump directly
Drag the playhead for precise positioning
Use keyboard shortcuts for step navigation

Best Practices

Stagger Element Entry

Create visual interest by staggering when elements appear:

Title: In 0s
Subtitle: In 0.3s
Image: In 0.5s
Button: In 0.8s

Match Scene Duration

Ensure elements fit within scene duration:

Check Scene Settings for total duration
Adjust element timing to fit
Use “999” duration for elements that should stay

Leave Exit Time

If scene has a transition, leave time for exit:

Scene duration: 5s
Transition: 0.5s
Last element should end by 4.5s or earlier

Elements that should animate together:

Give them the same In Time
Use keyframes for coordinated animation
Consider using identical durations

Common Timing Patterns

Fade In Sequence

Element 1: In 0.0s, fade animation
Element 2: In 0.2s, fade animation
Element 3: In 0.4s, fade animation

Hold and Exit

In Time: 0s
Duration: 3s
Exit animation: fade out at 2.5s

Delayed Reveal

Background: In 0s, Duration 999
Content: In 1.5s, Duration 999
Call-to-action: In 3s, Duration 999

Video Sync

Video: In 0s, no offset
Caption 1: In 2s (when speaker starts)
Caption 2: In 5s (next point)

Troubleshooting

Element Not Visible

Check In Time (may be in the future)
Check Duration (may have expired)
Verify playhead position
Check element opacity and Z-Index

Can’t Drag Bar

Element may be locked
Try clicking directly on the bar
Check if element is selected

Duration Won’t Change

Check minimum duration limits
Ensure dragging from right edge
Some elements have timing constraints

Keyframes Not Showing

Click expand arrow to reveal
Element must have keyframes set
Add a keyframe first

Timing Feels Wrong in Preview

Check scene duration mode
Verify transition timing
Compare timeline to preview playhead
Test with different playback speeds

Timeline Shortcuts

Action	Shortcut
Toggle Timeline	Click toolbar button
Move Playhead	Click ruler or drag
Select Element	Click bar
Open Properties	Double-click element label
Nudge Timing	Arrow keys (when bar selected)
Zoom Time Scale	Mouse wheel over timeline
Toggle Visibility	Click eye icon
Toggle Lock	Click lock icon
Reorder Layers	Drag element labels vertically

← Previous: Scene Sounds | Next: Themes and Styling →