CSS Motion Path beyond the Big Three Properties

May 8, 2018

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 chrome://flags.

See the Pen Banners in the Wind by Dan Wilson (@danwilson) on CodePen.

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 background-position or transform-origin, with an x and a y, either as a numerical value or a keyword like center.

See the Pen Offset Path Anchor by Dan Wilson (@danwilson) on CodePen.

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.

See the Pen Simple Path Examples by Chris Coyier (@chriscoyier) on CodePen.

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.

See the Pen Animating offset-distance & offset-path (& d) by Dan Wilson (@danwilson) on CodePen.

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 offset-distance from 0% to 100%. It also is animating the offset-path property itself, using the same two keyframes used in the SVG path’s d animation.

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.

.polar {
  offset-path: ray(90deg);
  offset-distance: 100px;
}

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-path and offset-distance we can animate an element going around a circle’s edge and animate it going toward and away from the center.

See the Pen CSS Motion Path with ray() by Dan Wilson (@danwilson) on CodePen.

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 offset-position.