CSS Almanac → Properties → O → offset-anchor

offset-anchor

Geoff Graham on Jan 27, 2025

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:

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:

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 ffboxes are attached to the same path at different anchor points:

Syntax

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

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
- : 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.
- : 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).