Intent to Ship: CSS Motion Path

Eric Willigers

unread,

Jun 10, 2015, 1:15:57 AM6/10/15

to blink-dev

Contact email

ericwi...@chromium.org

Spec

Motion Path Module Level 1

No TAG review yet.

Summary

Motion paths allow authors to animate elements along an author-specified 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 a CSS equivalent to the animateMotion tag, but for all HTML and SVG elements. (animateMotion only works with SVG elements, and only in browsers that support SMIL.)

The following CSS properties are implemented and proposed for shipping:

motion-path: none | path(<string>)

motion-offset: <length> | <percentage>

motion-rotation: [ auto | reverse ] && <angle>

motion: <motion-path> && <motion-offset> && <motion-rotation>

When the motion-offset 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.

The following motion-path options from the spec are not implemented or proposing for shipping at this time: <url> , <basic-shape> , <geometry-box> , path <fill-rule>

Link to “Intent to Implement” blink-dev discussion

Intent to Implement: CSS Motion Path

Is this feature supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.

Demos

http://bit.ly/1HLfdrv

Debuggability

CSS property values are displayed in DevTools, and can be edited.

Compatibility Risk

This is a new feature and Blink will be the first rendering engine to enable it. We believe this feature to be stable and a sensible addition to the web platform, but as the first to ship are willing to accept the risk that the final form may change. The small surface area helps mitigate this risk.

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

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

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

RESOLVED: joint publish CSS motion paths with SVG WG

https://lists.w3.org/Archives/Public/www-style/2015Apr/0144.html

RESOLVED: Motion Path FPWD granted

https://lists.w3.org/Archives/Public/www-svg/2015Feb/0033.html

RESOLUTION: We agree on a FPWD of Motion Path Module Level 1.

https://lists.w3.org/Archives/Public/public-svg-wg/2015AprJun/0002.html

OWP launch tracking bug?

http://crbug.com/496518

Entry on the feature dashboard

https://www.chromestatus.com/feature/6190642178818048

Brian Birtles

unread,

Jun 11, 2015, 11:39:03 PM6/11/15

to blin...@chromium.org

I wonder if you have any thoughts about these two issues in the spec:

* Issue 2: "More natural names requested for auto and reverse."

These will be hard to change after shipping.

* Issue 5: "Do we need to specify an origin of the element in motion so that it can be positioned accordingly before the motion? Something like motion-origin? Should we reuse transform-origin? (Probably not since the z coordinate doesn’t make any sense.)"

Once this ships, it's going to be difficult if we decide that motion transforms should respect transform-origin after all.

Do you mind bringing these issues up on public-fx?

Thanks,

Brian

Dimitri Glazkov

unread,

Jul 1, 2015, 2:04:34 PM7/1/15

to Eric Willigers, blink-dev

Eric,

Are you still hoping to proceed with this intent? Have you had a chance to discuss the issues raised by Brian at public-fx?

:DG<

Eric Willigers

unread,

Jul 1, 2015, 11:31:15 PM7/1/15

to Dimitri Glazkov, blink-dev

Hi Dimitri,

Yes, I'd still like to proceed. Yes, the issues Brian raised have been discussed on public-fx.

Eric.

[motion-path] More natural names for 'auto' and 'reverse'

No changes to the names. The implemented grammar is

`[ auto | reverse ] || <<angle>>`

[motion-path] Origin for motion paths?

Can proceed without motion-origin.

Chris Harrelson

unread,

Jul 13, 2015, 11:09:30 AM7/13/15

to Eric Willigers, bbir...@mozilla.com, Dimitri Glazkov, blink-dev

Reviving this thread, as it didn't reach a resolution. LGTM to ship. Brian, are your concerns reasonably addressed?

Thanks,

Chris

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Brian Birtles

unread,

Jul 13, 2015, 8:22:40 PM7/13/15

to Chris Harrelson, Eric Willigers, Dimitri Glazkov, blink-dev

On 2015/07/14 0:09, Chris Harrelson wrote:
> Reviving this thread, as it didn't reach a resolution. LGTM to ship.
> Brian, are your concerns reasonably addressed?

Yes, thank you.

Philip Rogers

unread,

Jul 21, 2015, 2:07:24 AM7/21/15

to Brian Birtles, Chris Harrelson, Eric Willigers, Dimitri Glazkov, blink-dev

LGTM!

Philip Jägenstedt

unread,

Jul 21, 2015, 4:41:55 AM7/21/15

to Philip Rogers, Brian Birtles, Chris Harrelson, Eric Willigers, Dimitri Glazkov, blink-dev

LGTM3

PhistucK

unread,

Jul 28, 2015, 2:53:23 AM7/28/15

to Eric Willigers, blink-dev

On Wed, Jun 10, 2015 at 8:15 AM, 'Eric Willigers' via blink-dev <blin...@chromium.org> wrote:

No TAG review yet.

Did you manage to have TAG review it since the original thread?

☆PhistucK

Eric Willigers

unread,

Jul 29, 2015, 7:25:29 PM7/29/15

to PhistucK, blink-dev

TAG review requested.

It doesn't need to block this intent, if there do happen to be changes we can revert the flag before we reach stable.

PhistucK

unread,

Jul 30, 2015, 1:34:23 AM7/30/15

to Eric Willigers, blink-dev

Yes, if changes are recommended before reaching to stable... That request should have been filed when the intent to ship was originally posted. :(

☆PhistucK

Reply all

Reply to author

Forward