Animating a design

Switch to Animate mode to reveal the timeline and add keyframes per layer.

Last updated About 3 hours ago

Switching the top-bar toggle to Animate reveals the timeline below the canvas β€” a toolbar, lanes per animated layer (Animation In / Loop / Out), a ruler, and per-lane keyframes:

Editor in Animate mode with the timeline

The timeline toolbar

Create a keyframe at the playhead, Play (Space) / Stop, and set the total animation length in seconds.

Per-keyframe options

  • Easing curve β€” about thirty curves: linear plus the ease-in / ease-out / ease-in-out families (sine, quad, cubic, quart, quint, expo, circ, back).
  • Typing animation (text layers) β€” reveal text character by character.
  • Ticket-number animation β€” for the queue "now serving" number.
  • Wait frame β€” pause on a keyframe before continuing.
  • Auto end time β€” end the animation automatically.

You can drag and scrub keyframes, multi-select them, drag the interpolation bar to move a whole set together, Ctrl+scroll to zoom the timeline, and double-click a lane to add a keyframe. Space plays/pauses; Del removes the selected keyframe.