Skip to main content

Animation Timeline

Select a layer, add an animation, then set the timing. Start with one effect so you see exactly what each control changes.

Read the timeline​

The bottom timeline shows animations for the selected layer. Each bar represents one animation, rather than one row for every layer in the project.

  • Horizontal position shows the delay before the animation starts.
  • Bar width shows the animation duration.
  • The playhead shows the preview time.
  • Selecting a bar opens its settings in the right panel.

An empty timeline usually means no layer is selected, or the selected layer has no animations.

Add an animation​

  1. Select a layer in Layers.
  2. Double-click an animation in the right panel, or drag the animation onto the timeline.
  3. Select the new bar.
  4. Set the start and end values.

The animation choices depend on the selected layer type. A sound layer uses audio controls rather than the visual animation list.

Change timing​

Drag the bar left or right to change its delay. Select the bar, then drag the resize handle on the right to change duration.

Use the animation settings for exact numbers. For example, a delay of 1 second and a duration of 2 seconds places the first pass from 1s to 3s.

Pause playback before editing. Move the playhead to 0s when changing the layer's base position, scale, or other starting properties.

Preview and scrub​

  • Select Play in the bottom toolbar to start preview.
  • Select Pause to hold the current frame.
  • Select Stop to return to the start.
  • Drag the playhead handle to inspect a specific time.
  • Select the camera during playback to capture a frame. Tools > Take Screenshot also captures the canvas.

Press Space outside a text field to start preview while the editor is paused. Use the playback buttons to pause or stop a running preview.

Build a sequence​

Try this first:

  1. Fade in the background at 0s.
  2. Bring in the logo at 0.5s.
  3. Start a repeating accent at 1s.
  4. Preview the entrance and several loops.

Use Delay Once when the initial delay belongs only to the first loop. Use Yoyo when the effect should reverse between passes.

Overlapping effects need a quick preview. Two animations changing the same property risk conflicting results.

Remove an animation​

Select the animation bar, then press Delete while playback is paused. Confirm the correct animation is selected before deleting.

Common fixes​

No animation bars​

Select a visual layer and add an animation from the right panel.

The duration handle is missing​

Select the bar first. The resize handle belongs to the selected animation.

The layer jumps during editing​

Stop preview and return to 0s. Set the base transform, then review the animation's start and end values.

The sequence looks different in HyperSpin​

Test the published theme in HyperSpin with the intended game, media, and aspect ratio. Editor preview uses the current project context.