{"id":270333,"date":"2018-05-04T06:58:00","date_gmt":"2018-05-04T13:58:00","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=270333"},"modified":"2018-05-04T06:58:00","modified_gmt":"2018-05-04T13:58:00","slug":"offset-anchor","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/offset-anchor\/","title":{"rendered":"offset-anchor"},"content":{"rendered":"

The offset-anchor<\/code> property defines a point within the box it is applied as the anchor that moves along the offset-path<\/code>.<\/p>\n

That’s kinda wordy, so let’s break that down a bit.<\/p>\n

<\/p>\n

You have an element, say a box: <\/p>\n

See the Pen Orange Box<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n

You want that box to move along a path, say a squiggly line. We can make that line with SVG directly in the HTML and using it as the offset-path<\/code><\/a> for the box. We create the animation by making use of the offset-distance<\/code><\/a> property:<\/p>\n

See the Pen Orange Square on Path<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n

Good, good. But what if we want the box to look like it’s hanging off the line? You know, like a person sliding along a zip line.<\/p>\n

That’s where offset-anchor<\/code> comes in! It marks a spot on the element and uses that to position the element on the path.<\/p>\n

Here’s an example where three different boxes are attached to the same path at different anchor points:<\/p>\n

See the Pen NMbEpy<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n