CSS Motion Path Hits a Cross-Browser Milestone
CSS offset-path has been gaining attention lately, and not just for its headline use case of moving elements along a curve. The same property can be turned to tricks like setting type on a circular layout, as well as experiments from Michelle Barker around drawing paths or animating text along a route.
The surge in interest tracks a concrete change in browser support. Dan Wilson, who has covered motion path for a long time, notes that with Firefox 72 shipping on January 7, 2020, CSS Motion Path is now live in Firefox, the new Edge (pegged for a January 15, 2020 stable release), Chrome, and Opera, plus other Blink-based browsers. That shared baseline means each now supports offset-path: path(), offset-distance, and offset-rotate.
Wilson’s write-up walks through the fundamentals and flags some easy-to-miss details—for example, that the path itself is animatable, not just the element riding on it.
