Timeline panel

The Timeline panel places the blocks of an animation in time and plays it. It sits at the bottom of the editor and shows the active sequence:

• Play and move through time: play, stop, repeat, and jump between the starts and ends of blocks.
• Focus on what you work on: show only part of the animation, and only the tracks of the shapes you select.
• Arrange blocks: move and stretch blocks on their tracks, and open or close gaps between them.
• Pace the animation: set the playback speed and the animation's length, and see its pauses.

From top to bottom, the panel has:

• Header: the buttons, the time readouts, and the panel settings.
• Overview strip: the whole animation, with the playback range highlighted.
• Ruler: the time in seconds, with the playhead, the line that marks the current time.
• Tracks: one row per animated shape, holding its blocks.

Showing the Timeline panel

Opens the panel at the bottom of the editor.

• Operation: choose Show timeline in the mode controls at the top right.
• Needs: Animation mode, or animation blocks already on the board.
• Result: the panel opens. It also opens by itself when you create the board's first animation block.

Docked panel

By default, the panel sits at the bottom of the editor:

• Height: drag its top edge up or down to show more or fewer tracks.
• Collapse or expand: double-click its top edge.
• Peek: while it's hidden, move the pointer to the bottom edge of the window to see it for a moment.

Floating window

Floats the panel over the board, inside the browser window.

• Operation: choose Float timeline at the right end of the header.
• Result: the panel floats over the board:
  • Move: drag its top bar.
  • Resize: drag a side, the bottom edge, or a corner.
• Tip: Dock timeline puts it back at the bottom.

Header controls

The header runs along the top of the panel, in three groups: display switches on the left, playback buttons in the center, and time readouts and settings on the right.

Display switches

On the left, these switches choose what the panel and the board show:

• Maintain speed: when you change how far a block goes on the board, its duration changes too, so its speed stays the same. See Timing.
• Show all animation indicators: shows on the board the indicators of every block of the selected shapes, such as their motion paths. See Block indicators.
• Hide culled blocks: hides the tracks of shapes outside the visible part of the board.
• Hide camera tracks: hides the active camera track and the tracks of camera shapes. A selected camera's tracks still show.

Playback controls

In the center, these buttons play the animation and move the playhead:

• Timeline spacer: opens or closes gaps between blocks. See Timeline spacer.
• See through active camera: while playing, shows the board through the camera an Active Camera block chooses.
• Timeline audio: turns sound on or off while you play or move through the animation in the editor. It doesn't change audio blocks or exported sound.
• Play to start: moves the playhead to the start of the playback range.
• Play to end: moves the playhead to the end of the playback range.
• Previous keyframe: moves the playhead back to the previous start or end of a block or a block pause shown in the tracks. Pause markers are skipped.
• Next keyframe: the same, forward.
• Play: plays from the playhead, or from the start of the playback range when the playhead is at its end. While playing, it becomes Stop, which pauses where you are.
• Repeat: plays the playback range again and again.
• Play selected block: plays the selected block's stretch of time again and again, with everything else that moves during it, until you choose it again. It needs one selected block.

Time readouts and settings

On the right, times are in seconds:

• Playback speed: speeds up or slows down playback in the editor, from 0.1×. The blocks don't change.
• T: the playhead's time. Type a time to move the playhead there.
• Rs: the start of the playback range.
• Re: the end of the playback range. Typed values keep it at least 0.1 seconds after Rs.
• D: the length of the animation. It's at least 1 second, and never shorter than the playback range or the end of the last block.
• Animation settings: the default speed of each kind of block. See Base speeds.

The overview strip and playback range

The overview strip, under the header, shows the whole animation: the blocks the tracks show, the pause markers, and the playhead. Its highlighted part is the playback range, the part of the animation shown in the ruler and tracks, and the part that plays.

Choosing the playback range

Limits the ruler, the tracks, and playback to the part of the animation you work on.

• Operation: change the range in one of these ways:
  • Drag outside the highlighted part to draw a new range.
  • Drag the highlighted part to move it.
  • Drag its start or end handle to change it.
  • Zoom, or move sideways, over the tracks.
  • Select an empty spot outside the highlighted part to make the range the whole animation again.
• Result: the ruler, the tracks, Rs, and Re follow the new range.
• Tip: other places choose their own part to play:
  • Exports: video and GIF exports can use this range with Use playback range. See Exports.
  • Player: it has its own range, in the Player settings.

The ruler and playhead

Under the overview strip, the ruler shows the time in seconds. The playhead is the blue line that marks the current time across all tracks:

• Move the playhead: select or drag along the ruler. This doesn't clear the block selection.
• Pause markers: the ruler counts the time pause markers hold the animation, so it matches what you see while playing. T, Rs, Re, and D don't count it.

Tracks

Each animated shape has its own row, its track, holding its blocks:

• Order: the active camera first, then camera shapes, audio, and other shapes. Within each group, tracks follow the order of their blocks.
• Selected shapes: selecting shapes on the board shows only their tracks, plus camera tracks unless you hide them. Clearing the selection shows all tracks again.
• Targets on the board: selecting a block outlines its target shapes on the board.
• Zoom and move: zooming or moving sideways over the tracks changes the playback range. When the tracks don't fit, scrolling up and down moves through them.

What a block shows

Each block is a bar on its track:

• Color: the kind of block:
  • Position: blue, or violet with auto-rotate on.
  • Rotation: amber.
  • Scale and Camera Zoom: emerald.
  • Resize: lime.
  • Opacity: slate in the light theme, pink in the dark theme.
  • Stroke: gray.
  • Text Animation, Text Sequence, and Path Crawl: indigo.
  • Video and Audio: purple.
  • Attributes: yellow.
  • Active Camera: the color of its camera, green by default.
• Handles: at both ends, to change the start and the end:
  • Circles for one target, squares for several. A block with several targets sits on its first target's track.
  • Camera icons on camera blocks, and audio icons on audio blocks.
  • Double-click a handle to move the playhead to that end.
• Stagger marks: with Stagger shapes on, ticks show when each shape starts.
• Block pauses: gray parts where the block holds. Other animations keep playing, even on the same shapes.
• Text Sequence marks: when each text starts, ends, and changes.
• Audio blocks: taller bars with the sound's waveform, its fades, and its volume.
• Other controls on the bar: some blocks show more, such as the edges of block pauses or camera transitions, explained on their own pages.

Selecting blocks

Select blocks on their tracks:

• One block: select its bar.
• Add or remove: hold Shift while selecting a bar.
• Box: drag a box across the tracks. From left to right it selects whole blocks; from right to left, block ends.
• Their shapes: double-click a bar to select its target shapes on the board instead.
• Clear: select an empty spot in the tracks, or select a shape on the board.

Moving and resizing blocks

Drag a bar to move its block in time, or a handle to change its start or end. These rules apply:

• Time 0: a block can't start before 0 seconds.
• Past the end: a block dragged or created past the end makes the animation, and its playback range, longer.
• Same kind: most blocks of the same kind on the same shape can't overlap, so a block you drag onto another snaps next to it. The exceptions:
  • Attributes blocks can overlap.
  • Position, Rotation, and Scale blocks can start inside a longer one, or start at the same time with a different end.
• Different kinds: overlap freely, except a Text Animation and a Text Sequence.
• Snapping: hold Ctrl or Cmd while dragging to move in tenths of a second.

Pauses

Pause markers

A pause marker holds the whole animation for a while. It's the purple line across the ruler and all tracks:

• Move: drag the line sideways.
• Presentation mode: in the Player's Presentation mode, the animation waits at each marker until you go on, so you can advance one step at a time.

Block pauses

A block pause holds the blocks it targets, while other animations keep playing, even on the same shapes. It's the gray part of a block's bar.

Animation pauses explains how to add and edit both kinds.

Timeline spacer

Opens or closes a gap in time, by moving later blocks together.

• Operation:
  1. Turn on Timeline spacer in the header.
  2. Drag sideways from an empty spot in the tracks: right opens a gap, left closes it. Hold Ctrl or Cmd to move in tenths of a second.
  3. Turn it off when you're done.
• Result: blocks that start at or after that spot move by the distance you drag, as far as the overlap rules allow:
  • Pause markers stay where they are.
  • A block pause shared by several blocks moves only when all of them move by the same amount.

While it's on, the Timeline Spacer section of the Attributes panel shows:

• Spacing delta: how far you're dragging.
• Only inside current range: moves only blocks that touch the playback range.
• Only selected blocks: moves only the selected blocks.