offset-anchor

The offset-anchor property defines a point within the box it is applied as the anchor that moves along the offset-path.

That’s kinda wordy, so let’s break that down a bit.

You have an element, say a box:

See the Pen Orange Box by Geoff Graham (@geoffgraham) on CodePen.

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 for the box. We create the animation by making use of the offset-distance property:

See the Pen Orange Square on Path by Geoff Graham (@geoffgraham) on CodePen.

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.

That’s where offset-anchor comes in! It marks a spot on the element and uses that to position the element on the path.

Here’s an example where three different boxes are attached to the same path at different anchor points:

See the Pen NMbEpy by Geoff Graham (@geoffgraham) on CodePen.

Syntax

.box {
  offset-anchor: [auto | <position>];
}

Values

• auto: Takes value of offset-position as long as that value is not also auto and as long as offset-path is set to none.
• position
  • <percentage>: A unit that is calculated from the relative width and height of the container it is in. For example, 50% 50% would be dead center. Note that keywords work here, just like background-position where center center would return the same result.
  • <length>: A unit that offsets the anchor from the upper left corner of the element’s box.

It’s worth noting that position is an animatable property.

Browser Support

The offset-* properties are still considered an experimental feature at the time of this writing. If the current lack of browser support makes you hesitant to use it on a project, then you might want to consider using GSAP for this level of animation. This will offer you the widest browser support at the moment.

As of Chrome 46 and Opera 33 (and the related mobile versions) we have “initial support” in Blink (no flag).

Related Properties

• offset-path
• offset-rotation
• offset-distance
• offset-position

Additional Information

• Motion Path Module Level 1 Specification
• WebKit Ticket #139128
• Mozilla Ticket #1186329
• Microsoft Edge feature request