Motion paths

A layer-owned path

Motion paths are part of the layer model. The path is not a visible paint and does not create a second layout pass.

{
  "motion": {
    "offsetPath": {
      "type": "path",
      "coordinateSpace": "parent-local",
      "referenceBox": "border-box",
      "contours": [
        {
          "id": "orbit",
          "start": { "x": 100, "y": 100 },
          "segments": [
            { "kind": "cubic", "control1": { "x": 180, "y": 0 }, "control2": { "x": 420, "y": 0 }, "to": { "x": 500, "y": 100 } }
          ],
          "closed": false
        }
      ]
    },
    "offsetDistance": 0,
    "offsetRotate": { "mode": "auto", "angle": 0 },
    "offsetAnchor": { "x": 40, "y": 40 }
  },
  "tracks": [
    {
      "id": "path-progress",
      "path": "motion.offsetDistance",
      "keyframes": [
        { "time": 0, "value": { "type": "number", "value": 0 } },
        { "time": 1400, "value": { "type": "number", "value": 1 } }
      ]
    }
  ]
}

Lowering rules

The HTML/CSS compiler resolves path(), CSS lengths and percentages, then stores offsetDistance as a normalized ratio from 0 to 1. The documented motion-path values compose translation, rotation, anchor and authored transforms.

Only supported deterministic path grammar is accepted. Empty paths, zero-length paths, non-finite values and unsupported grammar produce diagnostics.