Draw the path, export the CSS

A motion path lets a layer follow a curve you draw on the canvas, instead of moving in a straight line between keys.

Use this to:

  • Send an object along a custom route
  • Point it in the direction of travel
  • Export the same motion for the web

Draw the path

  1. Select the layer and add at least two position keys.
  2. On the canvas, pull the segment into a curve.
  3. Drag the handles until the route looks right.
  4. Preview. The layer follows that curve between the keys.

You don’t paste a path string. Clear the motion path when the layer should travel in a straight line again — that also turns off Auto-Orient.

Tip: For a path that should reverse, see Pingpong Travel.

Face along the path

The triangles on the selection overlay set which edge is forward. Pick north, east, south, or west, or turn Auto-Orient off.

While Auto-Orient is on, rotation is driven by the path. Turn the face off, or use the rotate handle, when you want a local angle again.

Export

Export SVG, CSS, or HTML as usual. The path you drew becomes the web output — you inspect it after export, you don’t author it as code. Lottie is a separate destination for the same project.

Script console and WebMCP

The same steps run in Edit → Scripting and through WebMCP. Agents run a script with pureanim_run_script or window.pureanim.run().

WebMCP tools:

  • pureanim_get_state
  • pureanim_list_commands
  • pureanim_run_script
  • pureanim_set_time
api.getMotionPath({ layer });
api.setSegmentCurved({ layer, segmentIndex, curved });
api.setPathAnchor({ layer, keyframeId, x, y });
api.setPathHandle({ layer, keyframeId, side, along, perp });
api.setAutoOrient({ layer, face: "e" });
api.setAutoOrient({ layer, face: "e", reverse: "travel" });
api.clearMotionPath({ layer });

setMotionPath with a segment index is the same as setSegmentCurved. There is no raw path-string command. face is "n", "e", "s", "w", or "off".

Full command reference: scripting.md. Agent loop: agents.md.