Intent to Implement: CSS Motion Path

[Eric]

Contact emails

ericwi...@chromium.org

Spec

http://dev.w3.org/fxtf/motion-1/

Motion Path Module Level 1 - Editor’s Draft

Summary

Motion paths allow authors to animate elements along an author-specified path.

The following CSS properties are defined:

motion-path

motion-position

motion-rotation

motion (shorthand)

When the motion-position property is animated, for example using Web Animations, the element moves along the path.

When motion-rotation is 'auto' (the default), the element automatically rotates as it follows the path.

Motion path animation provides an easy way for authors to declaratively specify animation of an element along a sequence of lines, arcs or splines. This is equivalent to SVG's animateMotion tag, but for all HTML and SVG elements (SMIL's animateMotion only works with SVG elements).

Motivation

Declarative motion path animation enables developers to easily make and maintain products with animated elements moving smoothly along paths.

Compared to complex solutions using requestAnimationFrame, the author's task of specifying the motion is greatly simplified, and the platform's task of providing a smooth 60 frames per second is also made easier.

Compatibility Risk

The motion path proposal has been positively received by the CSS Working Group - see minutes:

http://lists.w3.org/Archives/Public/www-style/2014Oct/0261.html

http://lists.w3.org/Archives/Public/www-style/2014Oct/0287.html

Ongoing technical constraints

None.

Design Doc for implementation in Blink

http://goo.gl/Wfso0u

Will this feature be supported on all five Blink platforms (Windows, Mac, Linux, Chrome OS and Android)?

Yes.

OWP launch tracking bug

http://crbug.com/416731

Entry in Chromium Feature Dashboard
https://www.chromestatus.com/features/6190642178818048

[Tab Atkins Jr.]

LGTM

Motion around the page is basically impossible to write by hand in all
but the most trivial cases; you need a tool to decompose the motion
path into independent x and y motions synced in keyframes. This is
not only complicated and stupid, it's also inefficient, as it makes
for giant @keyframes rules. The 'motion' property is a huge
improvement over this, and is really simple to use. +1

~TJ

[Douglas Stockwell]

lgtm

Motion path animation is an important capability which was previously only available to SVG. As adding these new properties to CSS requires no additional primitives in the Web Animations API, the 'MotionPathEffect' API has now been removed from the Web Animations spec: http://git.io/D6zyZg