Intent to Implement: CSS Motion Path

200 views
Skip to first unread message

Eric

unread,
Nov 17, 2014, 11:22:28 PM11/17/14
to blin...@chromium.org

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.

unread,
Nov 18, 2014, 7:16:45 PM11/18/14
to Eric, blink-dev
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

unread,
Nov 19, 2014, 6:27:02 PM11/19/14
to Tab Atkins Jr., Eric, blink-dev
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
Reply all
Reply to author
Forward
0 new messages