Happy holiday folks! All the best from us at Digitpaint
🍹

Day 4

Flashy animations with motion path

The Motion Path CSS module allows you to animate and position an object on a path. This means we can ditch JavaScript for these kinds of animations!

Let's throw some snowballs!

As you can see in the demo below, the snowballs follow a curved path from one wall to another. All done with CSS! Sadly, the demo will not work in Firefox, Safari or Internet Explorer.

How does it work?

First, we have to define a path with offset-path. This is the path along which the object moves during the animation. According to the specification, the value of the offest-path property can be any of the following:

  • an SVG path definition using path()
  • a url referencing an SVG path element by id
  • a basic CSS shape (circle, ellipse, inset or polygon)
  • none (which defines no path at all)

Unfortunately, at this time, path() and none are the only working values for offset-path.

Acquiring path data

Example of the svg path of the snowball
Drawing the data in a vector editing application

In the example above we drew paths in a vector editing application, saved the file as an SVG file, and used the d attribute of the path as the value for offset-path. This results in code that looks something like the bit below.

.snowball--one {
  offset-path: path("M0,.5s564,7,576,111");
} 

As you can see the paths values don't have any units. When applying the offset-path to an SVG, the values will be realtive to the svg's viewbox. In our example we've animated HTML elements and the values will be in pixels. Another thing to keep in mind is that the path will be relative to it's parent container's top left corner.

Having defined a path, we can now place our object on that path by setting the offset-distance property. The offset-distance property accepts the following values: length (in px) or percentage. This value specifies either the distance from the starting point of the path, or the distance from the starting point, relative to the length of the entire path.

By animating this property with CSS animations, CSS transitions or the Web Animations API, we can create the effect that's observable in our demo. Have a look at the source-code for more details

Other offset-properties

Other offset-properties (that we didn't make use of in our demo) are:

  • offset-rotate controls the direction (or angle) of the object with respect to it's offset path
  • offset-position defines the starting point of the object along the path
  • offset-anchordefines the point in the object that moves along the path

Great! Can I use it today?

As of this writing, the Motion Path CSS module is still in draft and not yet supported by all major browsers. It's not even the first iteration of this spec, as in the beginning, the properties used to be prefixed by motion-. So if you see older demos you might see them mentioning motion-path instead of offset-path

Browser compatibility

Basically it currently works on all blink-based browsers. But there is some good news, Microsoft and Mozilla are considering an implementation.

  • Chrome
  • Samsung Internet
  • Chrome for Android
  • Opera

Resources

Demo source code

Do you want to see what makes these demos possible? Have a look at their source code:

Back to home