Timeline

• Timeline
  • Timeline Top Bar Section
  • Tracks Section
  • Frames & Keyframes
  • Scenes Section
  • Keyboard & Mouse Shortcuts Section

Timeline

The Timeline spans the bottom of the screen ¹ and is where the timing of a slide's animations is viewed and edited.

The Timeline is accessed by going to the Module Editor, then the Top Bar, and clicking the Timeline button ¹. Clicking the Timeline button again closes the Timeline and returns the editor to Design Mode.

The Timeline also opens automatically when Animation Mode is entered by clicking the Animation Mode icon ¹ in the Right Sidebar, and opening it switches the editor into Animation Mode, so the Timeline and Animation Mode always work together.

Every layer in the slide is listed as a track, and each layer's animations appear in its track as frames that can be selected, moved and resized.

The Timeline can be made taller or shorter by dragging its top edge. When the tracks or the time range outgrow the panel, it scrolls vertically and horizontally.

When working in the Timeline you are always working on the currently active scene, the currently selected track, and the currently selected keyframe, so it pays to confirm all three are the ones you mean to work on before editing.

Timeline Top Bar Section

The row along the top of the Timeline holds the scene and playback controls on the left, and the time ruler across the rest of its width.

Scene Switcher (Dropdown)

Clicking the currently active Scene name opens the Scene Switcher, where you can change which scene the Timeline is editing. Every slide has an In Animation and an Out Animation scene, and any custom scenes are listed under an Action Triggered heading. The Add a new scene button at the top of the dropdown opens the Quick Scene Setup panel.

Scenes are covered in detail in the Scenes section below.

Options:

• _{In Animation}: The default scene. Its animations play the layers into view when the slide begins.
• _{Out Animation}: The scene whose animations play the layers out of view when the slide ends.

Layer Filter (Toggle Button)

Set whether the track list shows every layer, or only the layers that have keyframes in the active scene. The button sits between the Scene Switcher and the Play/Pause button, and shows Showing: All Layers or Showing: Layers with Keyframes when hovered.

Play/Pause (Button)

Plays the active scene from the playhead position so the animation can be previewed on the Stage. While playing, the button becomes a pause button, and pausing leaves the playhead in place so playback can resume from the same point. When the scene's animations finish, playback stops and the playhead returns to the start.

Ruler & Playhead

The ruler marks out the scene's time in seconds, and the playhead is the purple flag that moves along the ruler, with a line extending down through the tracks. It reads IDLE while resting at the start of the scene, and anywhere else it shows the current time as minutes, seconds and hundredths, such as 00:01:67.

Click anywhere on the ruler to move the playhead to that time, or drag the playhead to scrub. The Stage always shows the slide exactly as it looks at the playhead's time, allowing you to inspect any part of an animation.

While hovering over any track, a temporary second playhead previews the time under the cursor.

Slide End Marker

A flag labeled Slide End, with a dashed line running down through the tracks, marks the point on the ruler where the slide's display duration ends, e.g. 00:04:00 for a four second slide. (Note: It is an indicator rather than a control).

Depending on the zoom level of the time axis it may sit beneath the Add Marker button at the ruler's right end. If so, zooming out brings it into view.

Play on Load Marker

A flag under the ruler, on the first slide of a Story Telling module. Drag it to a point on the timeline, and a page that opens above the module scrolls the story to that point on its own before handing the page back to the visitor. Left at the start, nothing plays on load. A page that opens further down does not play either.

Whether the visitor can scroll back past this point is set by Scroll Back Stops at Play on Load in the Story Telling Panel.

Add Marker (Button)

Adds a State Marker to the ruler at the playhead position. The button sits at the far right end of the ruler.

State Markers are little triangles added to the Timeline ruler to help you label moments in time so they can be found again while fine tuning a scene.

Adding a marker opens a small panel where the marker can be named, confirmed with Done, or deleted with Remove. Clicking an existing marker's triangle on the ruler reopens the same panel. A marker placed too close to an existing marker is rejected with a Too Close! Move Markers Further Apart warning.

Tracks Section

Every layer in the slide is listed down the left side of the Timeline with its name and type icon, and each entry connects to the horizontal track beside it. Nested layers, such as the children of a group or the columns of a row, are listed indented beneath their parent. The Slide Background has a track of its own, listed at the bottom while the In Animation scene is active. A layer hidden with Hide Layer shows a crossed out eye icon beside its name.

Selecting Tracks

Clicking a track selects its layer. The track highlights purple, the layer is selected on the Stage, and the Animation Mode Sidebar switches to show that layer's animation settings.

Delete Layer (Button)

Deletes the track's layer from the slide. The button appears at the right end of the track's name cell when the track is hovered.

Hide Layer (Toggle Button)

Hides the track's layer on the Stage, or shows it again if it is currently hidden. The button appears when the track is hovered, and stays visible as a crossed out eye icon while the layer is hidden.

Lock Layer (Toggle Button)

Locks the track's layer so it cannot be selected or moved on the Stage, or unlocks it if it is currently locked. The button appears when the track is hovered.

Attribute Tracks

Some animations animate parts of a layer separately, such as a text animation working word by word. When a layer carries one of these, the animated attribute gains its own indented track beneath the layer's track ¹, such as a Words track for example, with its own keyframes that can be selected, moved and resized like any other.

Attribute tracks are managed through the layer's animation targets in the Advanced sub-mode of the Animation Mode Sidebar.

Frames & Keyframes

A layer's animation appears in its track as frames. A frame is a block that starts and/or ends with a keyframe, spans the time the animation runs, and shows its duration in milliseconds at its center. For example, a 1000 frame at the start of the track is a 1000 millisecond animation that plays as soon as the scene begins.

Selecting Frames & Keyframes

Clicking a frame selects it and moves the playhead to the clicked point, ensuring the Stage previews that exact moment. A selected frame turns purple and shows white handles on its keyframe(s).

In the Advanced sub-mode, the Keyframes section of the sidebar mirrors the selection, with the frame's Anim From and/or Anim To keyframes available for editing.

Moving & Resizing Frames

Dragging the body of an animation frame slides the whole frame along its track, which delays or advances the start of the animation without changing its length.

Dragging one of the keyframes at either end resizes the frame, changing the animation's duration. The duration number updates as the frame changes, as does the Duration field in the Advanced sub-mode.

Holding SHIFT while dragging moves the frame together with its neighbours and any matching attribute track frames, and holding CTRL/⌘ while dragging a keyframe moves the whole frame instead of resizing it.

Dragging a layer's own frame also moves its attribute tracks with it, the character, word and line rows included, so the spacing between them is kept. With several layers selected, each selected layer moves with its rows. Dragging a single attribute row moves that row only.

Layers Without Keyframes

In a scene where a layer has no keyframes, its track shows a No Keyframes flag and its name is dimmed in the track list. This may be the case with a new custom scene.

Selecting such a layer offers three starting points in the Keyframes section of the Advanced sub-mode. First Frame in Scene creates a fresh first keyframe, while Play IN in This Scene and Play OUT in This Scene make the layer play its existing in or out animation as part of the scene.

Scenes Section

A scene is a self contained animation sequence for the slide, and the Timeline edits one scene at a time. Scenes are chosen with the Scene Switcher, and the In and Out collection tabs of the Essentials sub-mode also switch the Timeline to the matching scene.

Default Scenes

Every slide has two default scenes. The In Animation scene plays when the slide begins, and is the scene shown when the editor loads. The Out Animation scene plays when the slide ends, and is marked from Last Scene because it continues from whatever state the previously played scene left the layers in. The Slide Background track is only listed in the In Animation scene.

Custom Scenes

Any number of custom scenes can be added to a slide with the Add a new scene button at the top of the Scene Switcher. They are listed under the Action Triggered heading because they do not play on their own, rather, a custom scene plays when an action triggers it.

While a custom scene is active in the editor, the mode label above the Stage reads Animation Mode followed by the scene's name, and hovering the scene's entry in the Scene Switcher reveals its settings and delete buttons.

Quick Scene Setup Panel

Clicking Add a new scene in the Scene Switcher opens the Quick Scene Setup panel, which creates a custom scene.

Scene Name (Text)

Set the name the scene is listed under in the Scene Switcher.

Affected Layers (Multi-select)

Set which of the slide's layers the scene animates. The dropdown lists every layer in the slide with a checkbox, along with a search field, and any combination of layers can be chosen.

Scene Type (Tab Select)

Set how the scene's animation starts out.

Options:

• _{Play IN}: The affected layers play their existing in animations as the scene.
• _{Play OUT}: The affected layers play their existing out animations as the scene.
• _{Custom Scene}: The affected layers start with no keyframes, ready for a custom animation to be built.

Add Scene (Button)

Creates the scene and switches the Timeline to it.

Scene Settings Panel

Hovering a custom scene in the Scene Switcher and clicking its gear button opens the Scene Settings panel.

Name (Text)

Set the scene's name.

Preview From (Dropdown)

Set the state the scene starts and previews from. Every other scene in the slide is also listed, so the scene can continue from a specific scene instead of the most recent one.

Options:

• _{Last Scene}: The scene continues from the state left by the last scene played.
• _{In Animation}: The scene continues from the end of the In Animation scene.
• _{Out Animation}: The scene continues from the end of the Out Animation scene.

Back to Default Scene (Button)

Returns the Timeline to the In Animation scene. The button is a small back arrow ¹ sitting just above the Timeline's top left corner.

Deleting a Scene

Hovering a custom scene in the Scene Switcher and clicking its trash button asks for confirmation before deleting the scene. Deleting a scene removes all of its layer animations and any action links pointing at it, so the confirmation step includes Delete Scene and Keep Scene buttons.

Keyboard & Mouse Shortcuts Section

The Timeline supports the following keyboard and mouse shortcuts. The full list can also be viewed inside the editor by going to the Top Bar, clicking the Settings button, choosing Shortcuts, and selecting the Timeline tab.

Navigation Shortcuts

• CTRL/⌘ + Mouse Wheel: Zoom the time axis towards the cursor.
• SPACE + Drag: Pan the timeline.

Frames & Keyframes Shortcuts

• SHIFT + Drag Frame: Move the frame together with its neighbours and any matching attribute track frames.
• CTRL/⌘ + Drag Keyframe: Move the whole frame instead of resizing it.