Update 10/2016: Several things have changed to CSS Motion Path in the year since I posted this. For the most up to date information, I have a new post that explains these changes: CSS Motion Path as of October 2016

As I started exploring the Web Animations API (WAAPI) in depth, the most exciting piece to me was the upcoming support for Motion Paths - animating along a specified path. The benefit here was clear as without it you either get the default translate transition along a straight line, have to write some extensive keyframes, or use a JS library to help you abstract out the logic. While the last option makes things easier, it'd still be nice to simply add a path to our existing CSS (or WAAPI) animations.

Chrome recently announced their initial support of the CSS Motion Path module. It is enabled at chrome://flags with the "Experimental Web Platform features" flag in Chrome 43+ (and opera://flags in Opera 30+), with the intent to be enabled by default in Chrome 46 (Opera 33).

If you have enabled the flag (personally, I keep my main Chrome stable with the default flags, and use Chrome Canary or Opera to enable flags such as this), you’ll see the above animation. The path defined is a spiral, and then there are nine elements animating along the path infinitely... moving inwardly, scaling down, becoming transparent, and swirling faster at the end.

There are still questions at the spec level, of course, but it’s great to see action taken on this as these will be fun properties to have at our disposal. It’s also pretty easy to get started.

How Do We Do This?

There are three new motion properties available in CSS and JS that we can combine with transitions, CSS keyframe animations, or the Web Animations API (the earlier Spiral example makes use of the WAAPI).

motion-path

The one that drives it all, motion-path defines our path along which to move. You can define a path, that will be the similar to how it is defined in SVG 1.1

  motion-path: path("M200 200 S 200.5 200.1 348.7 184.4z");

This can also take a fill-rule as the optional first parameter in the path call. I recommend reading Joni Trythall’s Pocket Guide to Writing SVG for a discussion on what this means.

You can also use a basic shape such as circle, polygon, ellipse, and inset. These should look familiar to you if you have tried using CSS Shapes.

Finally, you can refer to a shape via url().

Note: path() is the only one I have seen success with so far with Chromium's initial version.

motion-offset

To specify where an object appears on the path we use motion-offset. This can either be a double length value or a percentage. So to animate from the starting point of the path to the end we set up an animation that goes from 0 to 100%. With CSS Keyframes:

  @keyframes path-animation {
  0% { 
    motion-offset: 0;
  }
  100% { 
    motion-offset: '100%';
  }
}

Or with the WAAPI:

  m.animate([
    { motionOffset: 0 },
    { motionOffset: '100%' }
  ], 1000);

motion-rotation

The direction the object “faces” is handled by the motion-rotation property. Currently, there are four main ways to manage this:

  • The value "auto" means the element will rotate with the path.
  • With the value "reverse" the element will also rotate with the path, but it will add 180 degress, so it will be facing backward.
  • "auto Xdeg" (or "reverse Xdeg") will do the same except add X degrees
  • "Xdeg" will no longer rotate with the path, the element will stay fixed facing the same direction.

This demos shows examples for these options

Have Fun

Those are the basic properties needed for CSS Motion Path. The specification is not final at all, so this is simply a place to explore what is next. I have a collection of pens with people using CSS Motion Paths that you can check out for more inspiration.


24,477 4 48