The offset-path property in CSS defines a motion path for a component to comply with throughout animation.
This property started life as motion-path. This, and all different associated motion-* properties, are being renamed offset-* in the spec. We’re altering the names right here within the almanac. If you wish to use it proper now, in all probability greatest to make use of each syntaxes.
Right here’s an instance utilizing the SVG path syntax:
.thing-that-moves {
/* "Outdated" syntax. Obtainable in Blink browsers as of ~October 2015 */
motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
/* At the moment spec'd syntax. Ought to be in steady Chrome as of ~December 2016 */
offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}This property can’t be animated, fairly it defines the trail for animation. We use the offset-path property to create the animation. Right here’s a easy instance of animating motion-offset with a @keyframes animation:
.thing-that-moves {
offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
animation: transfer 3s linear infinite;
}
@keyframes transfer {
100% {
motion-offset: 100%; /* Outdated */
offset-distance: 100%; /* New */
}
}On this demo, the orange circle is being animated alongside the offset-path we set in CSS. We really drew that path in SVG with the very same path() information, however that’s not essential to get the movement.
Say we drew a cool path like this in some SVG enhancing software program:
We’d discover a path like:
The d attribute worth is what we’re after, and we will transfer it straight to CSS and use it because the offset-path:
Word the unitless values within the path syntax. If you happen to’re making use of the CSS to a component inside SVG, these coordinate values will use the coordinate system arrange inside that SVG’s viewBox. If you happen to’re making use of the movement to another HTML component, these values might be pixels.
Additionally notice we used a graphic of a finger pointing to point out how the component is mechanically rotated so it kinda faces ahead. You possibly can management that with offset-rotate:
.mover {
offset-rotate: auto; /* default, faces ahead */
offset-rotate: reverse; /* faces backward */
offset-rotate: 30deg; /* set angle */
offset-rotate: auto 30deg; /* mix auto habits with a set rotation */
}Values
As greatest as we will inform, path() and none are the one working values for offset-path.
The offset-path property is meant to just accept all the next values.
path(): Specifies a path within the SVG coordinates syntaxform(): Creates a path with CSS-y instructions as a substitute of SVGurl(): References the ID of an SVG component for use as a motion pathnone: Specifies no offset path in any respect- Form features: A set of CSS features that specify a form in accordance to the CSS Shapes specification, which incorporates:
Right here’s some exams:
Even telling an SVG component to reference a path definied the identical SVG by way of url() doesn’t appear to work.
With the Internet Animations API
Dan Wilson explored a few of this in Future Use: CSS Movement Paths. You've entry to all this identical stuff in JavaScript by the Internet Animations API. For instance, say you’ve outlined a offset-path in CSS, you'll be able to nonetheless management the animation by JavaScript:
Extra Examples
Heads up! Quite a lot of these had been created earlier than the change from motion-* naming to offset-*. Ought to be fairly simple to repair them for those who’re so inclined.
Browser help
Is There One other Method to Do This?
Our personal Sarah Drasner wrote about SMIL, SVG’s native technique for animations, and the way animateMotion is used to animate objects alongside a SVG path. It seems to be like:
GreenSock is one other manner although. Sarah talks about this in GSAP + SVG for Energy Customers: Movement Alongside A Path (SVG not required). Instance:
Almanac
on
Sep 5, 2011
clip-path
Almanac
on
Could 4, 2018
offset-anchor
Almanac
on
Jul 22, 2016
offset-distance
Almanac
on
offset-rotate
Almanac
on
Jul 9, 2025
circle()
Almanac
on
ellipse()
Almanac
on
Jul 15, 2025
inset()
Almanac
on
Jun 18, 2025
path()
Almanac
on
Jul 24, 2025
polygon()
Almanac
on
Jun 10, 2025
form()
.triangle { clip-path: form(from 50% 0%, line by 50% 100%, hline to 0%, line to 50% 0%, shut); }
Almanac
on
Aug 14, 2025
url()
.component { background-image: url("https://instance.com/picture.png"); }
Almanac
on
Jul 15, 2025
xywh()
.component { clip-path: xywh(60px 4em 50% 10vw spherical 10px 30px); }
