Motion paths

A layer's path across the canvas: its key dots, bezier handles to bend it, and the anchor point it turns around.

When a layer's position is keyed, its motion path shows on the canvas: a line through where it will be, with a dot at each position key. You shape the move by dragging on the canvas, not by typing numbers.

Bend a motion path on the canvas · 0:05
Description

A logo reveal in Animate whose logo mark travels in from the lower left. With the mark selected, its motion path is drawn on the canvas with a dot at each key. The middle dot is clicked to show its handles, and a handle is dragged so the straight path becomes a curve. Space plays the mark sweeping along the curve.

How to

Bend a path into a curve

  1. In Animate, select one layer whose position is keyed, with the Select tool, while playback is stopped. Its path appears with a dot for every key.
  2. Click a dot. That picks the moment (the playhead jumps to it) and shows the dot's two bezier handles.
  3. Drag a handle. The path bends, and the handle on the other side mirrors it. Hold Alt to move one handle on its own, for a sharp turn.
  4. Press Home, then Space. The layer follows the curve at the pace its keys' curves set.

Move where a layer is at one moment

Drag a dot. Both position keys at that moment move together, and the rest of the path and every curve stay as they were. Where only one of the pair was keyed, PopCraft adds the other at that moment.

Turn a layer around a different point

Drag the anchor (the crosshair) to move the pivot that rotation and scale use. Hold Alt to keep the layer where it is on the canvas. Anchor X and Y are keyable too, and the anchor can lie outside the layer (for an orbit or a swinging sign).

Reference

  • A path needs position keys: X and Y, or Offset X and Offset Y for a layer that auto layout places.
  • Progress along a curved path follows the distance travelled, eased by the first axis's curve, so the speed along a curve matches the curve you picked.
  • The handles are stored on the keys, so a curved path exports to Lottie as a curved motion path.
  • Dragging on the canvas while Space is held pans, as usual; the motion handles ignore that press.
  • The onion skin shows the layer's ghosts along its path, a few frames either side.