The offset-path property in CSS defines a motion path for a component to observe 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, most likely finest to make use of each syntaxes.
Right here’s an instance utilizing the SVG path syntax:
.thing-that-moves {
/* "Previous" syntax. Out there 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. Must 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%; /* Previous */
offset-distance: 100%; /* New */
}
}On this demo, the orange circle is being animated alongside the offset-path we set in CSS. We truly 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 are able to transfer it straight to CSS and use it because the offset-path:
Be aware 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 ingredient, these values might be pixels.
Additionally notice we used a graphic of a finger pointing to indicate how the ingredient is robotically rotated so it kinda faces ahead. You'll be able to 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 conduct with a set rotation */
}Values
As finest as we are able to inform, path() and none are the one working values for offset-path.
The offset-path property is meant to simply 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 ingredient 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 ingredient to reference a path definied the identical SVG through 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 might have entry to all this identical stuff in JavaScript by means of the Internet Animations API. For instance, say you’ve outlined a offset-path in CSS, you possibly can nonetheless management the animation by means of JavaScript:
Extra Examples
Heads up! A variety of these have been created earlier than the change from motion-* naming to offset-*. Must be fairly straightforward to repair them in case you’re so inclined.
Browser assist
Is There One other Option to Do This?
Our personal Sarah Drasner wrote about SMIL, SVG’s native methodology for animations, and the way animateMotion is used to animate objects alongside a SVG path. It seems to be like:
GreenSock is one other method 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
Might 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()
.ingredient { background-image: url("https://instance.com/picture.png"); }
Almanac
on
Jul 15, 2025
xywh()
.ingredient { clip-path: xywh(60px 4em 50% 10vw spherical 10px 30px); }
