{"id":243521,"date":"2016-07-19T07:47:23","date_gmt":"2016-07-19T14:47:23","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=243521"},"modified":"2019-12-04T07:50:01","modified_gmt":"2019-12-04T14:50:01","slug":"offset-path","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-path\/","title":{"rendered":"offset-path"},"content":{"rendered":"

This property began life as motion-path<\/code>. This, and all other related motion-* properties, are being renamed offset-* in the spec<\/a>. We’re changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes.<\/p>\n

The offset-path<\/code> property in CSS defines a movement path for an element to follow during animation. Here’s an example using the SVG path syntax:<\/p>\n

.thing-that-moves {\r\n  \/* \"Old\" syntax. Available in Blink browsers as of ~October 2015 *\/\r\n  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\");\r\n \r\n  \/* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 *\/\r\n  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\");\r\n}<\/code><\/pre>\n
This property cannot be animated, rather it defines the path for animation. We use the motion-offset<\/code><\/a> property to create the animation. Here’s a simple example of animating motion-offset with a @keyframes animation:<\/p>\n
.thing-that-moves {\r\n  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');\r\n  animation: move 3s linear infinite;\r\n}\r\n\r\n@keyframes move {\r\n  100% { \r\n    motion-offset: 100%;   \/* Old *\/\r\n    offset-distance: 100%; \/* New *\/\r\n  }\r\n}<\/code><\/pre>\n
See the Pen Simple Example of Animating Along a Path<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n
In this demo, the orange circle is being animated along the offset-path<\/code> we set in CSS. We actually drew<\/em> that path in SVG with the exact same path()<\/code> data, but that’s not necessary to get the motion. <\/p>\n
Say we drew a funky path like this in some SVG editing software:<\/p>\n
\"\"<\/figure>\n
We would find a path like:<\/p>\n
<path d=\"M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z\" \/><\/code><\/pre>\n
The d<\/code> attribute value is what we’re after, and we can move it straight to CSS and use it as the offset-path<\/code>:<\/p>\n
See the Pen zEpLRo<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n
Note the unitless values in the path syntax. If you’re applying the CSS to an element within SVG, those coordinate values will use the coordinate system set up within that SVG’s viewBox<\/code>. If you’re applying the motion to some other HTML element, those values will be pixels. <\/p>\n
Also note we used a graphic of a finger pointing to show how the element is automatically rotated so it kinda faces forward. You can control that with offset-rotate<\/code>:<\/p>\n
.mover {\r\n  offset-rotate: auto; \/* default, faces forward *\/\r\n  offset-rotate: reverse; \/* faces backward *\/\r\n  offset-rotate: 30deg; \/* set angle *\/\r\n  offset-rotate: auto 30deg; \/* combine auto behavior with a set rotation *\/\r\n}<\/code><\/pre>\n
Values<\/h3>\n
As best as we can tell, path()<\/code> and none<\/code> are the only working<\/em> values for offset-path<\/code>.<\/strong><\/p>\n
The offset-path<\/code> property is supposed to accept all the following values.<\/p>\n