Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.
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 ofoffset-position
as long as that value is not alsoauto
and as long asoffset-path
is set tonone
.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 likebackground-position
wherecenter center
would return the same result. - : A unit that offsets the anchor from the upper left corner of the element’s box.
- : A unit that is calculated from the relative width and height of the container it is in. For example,
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).
Additional Information
- Motion Path Module Level 1 Specification
- WebKit Ticket #139128
- Mozilla Ticket #1186329
- Microsoft Edge feature request