Motion paths

A shape, and a distance along it

Open motion path in the inspector and pick a shape, or use ⌘K “Motion path: arc”. A new path arrives with a one-second move along it, so something moves right away. Along path is a property like any other, with diamonds, a row on the timeline and a curve you shape in the curve panel, springs included. It runs from 0% at the start of the path to 100% at its end.

4 shapes, each a width and a height

Arc, Wave, Loop, Orbit. The two numbers are the box the shape fills: an arc’s distance and rise, a wave’s amplitude, a loop’s size, an orbit’s ellipse. A negative width arrives from the other side, and a negative height flips the shape downward. The selected element’s path is drawn on the canvas as the line its center travels.

Every path ends where the element rests

At 100% the element is exactly where its layout put it; the path is where it comes from. So an entrance lands in its slot, a subtler intensity variant is a smaller path that still lands home, and the reduced-motion variant leaves the element in place.

Upright, or following the path

Facing keeps the element level, or turns it to face its direction of travel, like a car on a road. When it’s following the path, it stays turned even at rest if the path arrives at an angle.

A path replaces x and y

A path and an x/y track would both move one element, and CSS applies the path and then the transform, so the two would add together. So an element has one or the other. On a path, the x and y rows are dimmed and a keyframe on either is refused with a message. An element that already moves with x or y is told to delete those tracks first, and so is a preset that moves with them.

What the export writes

offset-path: path(…), offset-rotate and translate: 50% 50%, with offset-distance animated in percent: as a stylesheet in CSS, as style and animate in Motion, and as plain properties GSAP sets and tweens (no MotionPathPlugin). The translate matters: CSS starts a path at the element’s top-left corner and moves its center along it, which makes the element jump by half its size, and 50% 50% cancels that at any size.

How it’s checked

A path never changes transform, so the parity gate measures these fixtures by the element’s box (where its center is and which way it faces) in all three dialects. CSS and Motion sample a spring along a path five times finer than a spring on x, since a path folds its length into a smaller displacement. Motion’s native springs on a path pin their rest thresholds for the same reason.

Where it stops. Parametric shapes only; there’s no drawn path with handles yet. Interaction states can’t move an element along its path. The canvas draws the guide for top-level elements; a picked element travels its path but has no guide line. Motion’s stagger form exports the shared animation as variants and doesn’t carry per-element settings, so staggered children on a path lose the path there (CSS and GSAP keep it). And translate is a property your own CSS may also set (Tailwind’s translate utilities do): on the same element, only one of the two wins.