Intent to Ship: CSS Motion Path

293 views
Skip to first unread message

Daniil Sakhapov

unread,
May 11, 2023, 8:38:31 AM5/11/23
to blink-dev

Contact emails

sakh...@chromium.org

Explainer

As part of the Interop 2023 we ship the rest of the CSS Motion Path. Currently only path() works. And after a spec has been reworked other path types are ready to be shipped.

Specification

https://drafts.fxtf.org/motion

Summary

Motion path allows authors to position any graphical object and animate it along an author specified path. This allows a number of powerful new transform possibilities, such as positioning using polar coordinates (with the ray() function) rather than the standard rectangular coordinates used by the translate() function, or animating an element along a defined path, making it easy to define complex and beautiful 2d spatial transitions. Paths can be specified as circle(), ellipse(), rect(), inset(), xywh(), polygon(), ray() and url().


Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable

Risks



Interoperability and Compatibility


Gecko: In development WIP as part of Interop 2023

WebKit: In development WIP as part of Interop 2023

Web developers: No signals

Other signals: It's part of the Interop 2023

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?


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

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/css/motion

Flag name

CSSOffsetPathBasicShapesCircleAndEllipse, CSSOffsetPathBasicShapesRectanglesAndPolygon, CSSOffsetPathCoordBox, CSSOffsetPathRay, CSSOffsetPathRayContain, CSSOffsetPathUrl

Requires code in //chrome?

False

Estimated milestones

Shipping on desktop115
DevTrial on desktop115
Shipping on Android115
DevTrial on Android115
Shipping on WebView115

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5124394449371136


This intent message was generated by Chrome Platform Status.

一丝

unread,
May 11, 2023, 12:30:20 PM5/11/23
to blink-dev, sakh...@chromium.org
As a developer, it's great to see Chrome implement full motion path functionality. However, in order to reduce unnecessary compatibility and potential issues, I hope that some CSSWG issues can be resolved before shipping

-  Add "at <position>" to path(), shape(), and ray(): https://github.com/w3c/fxtf-drafts/issues/504#issuecomment-1466240729

Mike Taylor

unread,
May 12, 2023, 7:09:37 PM5/12/23
to Daniil Sakhapov, blink-dev

Hi Daniil,

On 5/11/23 8:38 AM, Daniil Sakhapov wrote:

Contact emails

sakh...@chromium.org

Explainer

As part of the Interop 2023 we ship the rest of the CSS Motion Path. Currently only path() works. And after a spec has been reworked other path types are ready to be shipped.

Specification

https://drafts.fxtf.org/motion

Summary

Motion path allows authors to position any graphical object and animate it along an author specified path. This allows a number of powerful new transform possibilities, such as positioning using polar coordinates (with the ray() function) rather than the standard rectangular coordinates used by the translate() function, or animating an element along a defined path, making it easy to define complex and beautiful 2d spatial transitions. Paths can be specified as circle(), ellipse(), rect(), inset(), xywh(), polygon(), ray() and url().


Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable
Any reason why? Has TAG ever reviewed the draft spec?


Risks



Interoperability and Compatibility


Gecko: In development WIP as part of Interop 2023

WebKit: In development WIP as part of Interop 2023
Per https://groups.google.com/a/chromium.org/g/blink-dev/c/HxqAcgnTs8o/m/I_Fx6FoRBQAJ, can we request formal signals from Apple and Mozilla?
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAH3Z92-4tVqmp5E_4ScWLqgmfdV0abMf_eoVrPrP76pLsBz2Fg%40mail.gmail.com.

Philip Jägenstedt

unread,
May 16, 2023, 7:39:21 AM5/16/23
to Mike Taylor, Daniil Sakhapov, blink-dev
On Sat, May 13, 2023 at 1:09 AM Mike Taylor <mike...@chromium.org> wrote:

Hi Daniil,

On 5/11/23 8:38 AM, Daniil Sakhapov wrote:

Contact emails

sakh...@chromium.org

Explainer

As part of the Interop 2023 we ship the rest of the CSS Motion Path. Currently only path() works. And after a spec has been reworked other path types are ready to be shipped.

Specification

https://drafts.fxtf.org/motion

Summary

Motion path allows authors to position any graphical object and animate it along an author specified path. This allows a number of powerful new transform possibilities, such as positioning using polar coordinates (with the ray() function) rather than the standard rectangular coordinates used by the translate() function, or animating an element along a defined path, making it easy to define complex and beautiful 2d spatial transitions. Paths can be specified as circle(), ellipse(), rect(), inset(), xywh(), polygon(), ray() and url().


Blink component

Blink>CSS

TAG review

None

TAG review status

Not applicable
Any reason why? Has TAG ever reviewed the draft spec?

The feature has been shipping since Chrome 55 and Firefox 72, so it's already many years old. I don't think a high-level TAG review for this feature would make sense or be a good use of time.

Daniil Sakhapov

unread,
May 16, 2023, 9:03:41 AM5/16/23
to blink-dev, Philip Jägenstedt, Daniil Sakhapov, blink-dev, Mike Taylor
Issued the requests: https://github.com/WebKit/standards-positions/issues/187 and https://github.com/mozilla/standards-positions/issues/802.

Also note: the spec has been largely finalised, so I don't expect any big changes, including the issues mentioned by 一丝. 

Rick Byers

unread,
May 24, 2023, 11:55:07 AM5/24/23
to Daniil Sakhapov, blink-dev, Philip Jägenstedt, Mike Taylor
LGTM1

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Alex Russell

unread,
May 24, 2023, 11:55:28 AM5/24/23
to blink-dev, Rick Byers, blink-dev, Philip Jägenstedt, Mike Taylor, Daniil Sakhapov
LGTM2; looking forward to this launching.

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

Yoav Weiss

unread,
May 24, 2023, 11:56:52 AM5/24/23
to Alex Russell, blink-dev, Rick Byers, Philip Jägenstedt, Mike Taylor, Daniil Sakhapov
LGTM3

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

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/e78437a3-5079-46b9-9759-032fa9f67148n%40chromium.org.
Reply all
Reply to author
Forward
0 new messages