BT

InfoQ Homepage News CSS Motion Path Now Supported in Most Browsers

CSS Motion Path Now Supported in Most Browsers

Bookmarks

With the release early this year of Firefox 72, the CSS Motion Path specification is now implemented in most browsers. With CSS Motion Path, developers can implement a larger range of complex animations without resorting to JavaScript, or importing full-featured animation libraries like GSAP (GreenSock Animation Platform).

The CSS Motion path specification describes a set of properties that allow authors to position any graphical object and animate it along an author specified path. The object can be positioned, transitioned and animated along this path over a period of time. The time may be static if no animation was specified.

example of motion path
[Source: CSS Motion Path Working Draft]

The CSS Motion Path specification defines four properties:

The Motion Path module allows specifying the position of a box as the distance (offset-distance) of the box’s anchor point (offset-anchor) along a geometrical path (offset-path) defined against the coordinates (offset-position) of its containing block. The box’s orientation can optionally be specified as a rotation (offset-rotate) with respect to the direction of the path at that point.

The offset path property represents the geometrical path objects which will follow. Of the few proposed values in the specifications for the property, only path() (which takes a path string with SVG coordinate syntax) seems to be supported uniformly:

.rocket {
	offset-path: path('M1345.7 2.6l2.4-4.4');
}

An animation can then be defined to animate the object’s element between different values by means of the offset-distance property. A value of 0% means the object is positioned at the start of the path. A value of 100% means the object is positioned at the end of the path:

@keyframes move {
 0% { offset-distance: 0%; } 
 100% { offset-distance: 100%; } 
}

With the keyframes defined, the animation can be configured with the animation property:

animation: move 3000ms infinite alternate ease-in-out;

The offset-rotate property allows developers to specify how much to rotate the object’s box being animated. By default, the center of an object’s box is positioned on the path. The offset-anchor property allows developers to position another point of the box on the path. The property offset-path can also be animated.

The following two animations by Facundo Corradini illustrate the animations which can be achieved with CSS Motion Path without any JavaScript.

CSS Motion Path demo animation on hover

CSS Motion Path demo animation of the offset-path property

Before CSS Motion Path, moving elements through a path required a conscious and precise use of simultaneous translation and rotation, skills in handling browser discrepancies, and often resulted in a very complex set of keyframes. JavaScript developers could also resort to JavaScript animation libraries like GSAP. While CSS Motion Path does not entirely eliminate the need for animation libraries (it is supported for three-quarters of user browsers and not supported by Safari), it does raise the threshold for usage of such libraries.

CSS Motion Path is still in the Working Draft status. Firefox support landed in January this year. Chrome support is effective since version 46 (behind the #enable-experimental-web-platform-features flag). With the Chromium-based released also in January this year, the Edge browser also supports CSS Motion Path.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Marquee

    by Sam King /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Excellent! Soon we will be able to effortless marquee stuff across the screen once more... :)

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.