CSS Motion Path beyond the Big Three Properties
While still only in Chromium-based browsers and actively being drafted for its specification, CSS Motion Path has grown up a bit in its three years since Chrome 46 rolled out the first implementation.
I’ve previously documented the basics of the primary CSS Motion Path use case via the main three properties —
offset-path to define a path for an element to follow,
offset-distance to position the element on that path, and
offset-rotate to affect the direction the element faces.
There are additions to the spec since my last roundup (and even better, some features actually rolling out to Chrome), so assuming you are already familiar with the basics let’s dig in to the new functionality. To make sure you are seeing the latest, view this article and its demos in Chrome 66+ with Experimental Web Platform Features enabled in
Anchoring the element
By default, an element with a path will move as though the center of the element is connected to the path. We can change this location with the
offset-anchor property. This accepts a
<position>, so it takes values similar to
transform-origin, with an
x and a
y, either as a numerical value or a keyword like
Animating the path itself
A couple years ago, Chromium introduced support for the
d property in CSS that takes a
path() and maps directly to the value you would find in a
d attribute inside an SVG
path element. This allows you to change the definition of the path in CSS, and additionally supported animation if the browser can interpolate the values needed, as demonstrated by Chris Coyier.
The CSS Motion Path spec introduced similar interpolation logic for the
offset-path property. Therefore, not only can we move an element along a path, we can change the path along which it moves.
The white path in this example is in the SVG, being animated in CSS with a keyframe animation modifying the
d property. The blue polygon is animating in two ways, starting with a more typical animation of its
100%. It also is animating the
offset-path property itself, using the same two keyframes used in the SVG path’s
Rays and polar coordinates
The biggest change to the CSS Motion Path spec since its introduction was its combining with parts of thee CSS Round spec. In particular, the concept of polar coordinates was rolled into the
offset-path property. This will be a pretty powerful option as outlined in the spec, but its current “behind a flag” version is currently only a small subset of the feature. As such, I will only touch on what is implemented now, as the full version will be easier to explain when it is implemented.
The key here is that
offset-path now accepts a new
ray() function which specifies an angle. This angle creates a line to position through polar coordinates from the center of a circle. Combined with an
offset-distance, this angle will determine in which direction the element will move from the circle and how far.
This will take our element and move it 100px to the right. Using 135 degrees would move it to the bottom right.
Since we can now animate both
offset-distance we can animate an element going around a circle’s edge and animate it going toward and away from the center.
This is all in early stages. There will be a lot more to explore here once the full implementation lands. That is when we can talk about containing blocks, sides, and the fifth new CSS Motion Path property called