The CSS `offset-path` property defines a movement path for elements to follow during animation. Originally named `motion-path`, it is being renamed to `offset-path` in the spec. The property accepts values like `path()` (SVG coordinate syntax), `shape()` (CSS-native commands), and `url()` (referencing an SVG element), though in practice only `path()` and `none` are reliably supported. Animation is driven by the companion `offset-distance` property inside `@keyframes`. Elements automatically rotate to face forward along the path, controllable via `offset-rotate`. Alternatives include SVG's native `animateMotion` (SMIL) and GreenSock (GSAP). Related properties include `offset-anchor`, `offset-distance`, and `offset-rotate`.

4m read timeFrom css-tricks.com
Post cover image
Table of contents
ValuesBrowser supportIs There Another Way to Do This?Related Properties
20.2K Impressions1 Comment