Intent to Ship: CSS Motion Path

[Daniil Sakhapov]

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 desktop	115
DevTrial on desktop	115

Shipping on Android	115
DevTrial on Android	115

Shipping on WebView

115

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5124394449371136

This intent message was generated by Chrome Platform Status.

[一丝]

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

- https://github.com/w3c/fxtf-drafts/issues/512

- https://github.com/w3c/csswg-drafts/issues/8828

[Mike Taylor]

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]

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]

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]

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.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/411f1518-8153-480d-ae23-194bc866c92an%40chromium.org.

[Alex Russell]

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]

LGTM3

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/411f1518-8153-480d-ae23-194bc866c92an%40chromium.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.