Intent to Experiment: Shared Element Transitions

336 views
Skip to first unread message

Ian Vollick

unread,
May 7, 2021, 6:16:44 PM5/7/21
to blink-dev

Contact emails

vmp...@chromium.org, chri...@chromium.org, vol...@chromium.org

Explainer


https://github.com/vmpstr/shared-element-transitions/blob/main/README.md

Specification

None

Design docs


https://docs.google.com/document/d/1xktmM_0ZRiLhDmc6-7OK1qRY29QCTuHpSxXfxceZ9F4/view

Summary

Shared Element Transitions is a proposal for a new script API that allows a simple set of transitions in both Single-Page Applications (SPAs) and Multi-Page Applications (MPAs). This feature enhances the visual polish of pages without requiring a large development effort from developers to make transitions look nice. By selecting from a set of user-agent implemented transition effects, the developers can achieve a polished transition look with minimal effort.



Blink component

Blink>Animation

TAG review

https://github.com/w3ctag/design-reviews/issues/631

TAG review status

Pending

Risks



Interoperability and Compatibility

Low. As a new feature, the risk here is that other browsers do not implement it, but since this is a progressive enhancement, sites should be able to drop usage of the feature easily in browsers where it is not supported.



Gecko: No signal

WebKit: No signal

Web developers: Positive Interest in the feature: https://twitter.com/jaffathecake/status/1386673316354797570 Main feedback is requests to provide more customizability and power: https://github.com/WICG/shared-element-transitions/issues/28 https://github.com/WICG/shared-element-transitions/issues/9

Ergonomics

None.



Activation

Low. As with interop/compat risks, the difficulty stems from this being a new feature without support in other browsers. A polyfill for the SPA case would be beneficial, but it will not be possible to polyfill MPA behavior. That said, dropping the customized transition should not impact the usability of a site, fundamentally, so this can easily be dropped on browsers that do not support the feature.



Security

The current implementation handles transitions in Viz in anticipation of MPA scenarios. More details on this are outlined in the design doc. See also the security and privacy self-review questionnaire that was completed as part of the TAG review process: https://github.com/WICG/shared-element-transitions/blob/main/security-privacy-questionnaire.md



Goals for experimentation

The API shape is currently limited, providing only a stock set of transition types. We've already seen engagement on the WICG and a desire for more customization (see web developer response). We hope to learn more about the utility of the default transition types and experiences partners would like to create, but are unable to achieve with the limited API (we have two external partners who have indicated interest). Based on that feedback, we may make changes to the API to add more customization. We also want to know how easy it is to adopt this API on an existing site.



Reason this experiment is being extended

n/a



Ongoing technical constraints

None.



Debuggability

It is possible to set breakpoints inside post-preparation and post-transition handlers, but beyond this there is no way, presently, to debug an unexpected transition. Specifically, there currently is no way to scrub through a transition, or to inspect the shared/transitioned elements. These are potential areas for improvement if we get developer feedback that these would be helpful.



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

No

Currently no support for Android WebView. WebView presents challenges due to its rendering architecture.



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

No

Flag name

DocumentTransition

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1150461

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5193009714954240

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/7SMI3IklO4g/m/JS-JojxNAwAJ


This intent message was generated by Chrome Platform Status.

Ian Vollick

unread,
May 11, 2021, 11:09:21 AM5/11/21
to Titouan Rigoudy, blink-dev
On Tue, May 11, 2021 at 10:53 AM Titouan Rigoudy <tit...@chromium.org> wrote:
Hi there,

It is unclear to me whether this intent covers the MPA use case or not. The explainer mentions the fact that the MPA API is still under discussion, and crbug.com/1200518 only covers the SPA case, yet this intent talks about both SPA and MPA. Could you clarify?

Thank you for asking. For this OT we'll only support the SPA case.

Thanks,
Titouan

--
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/CAF10CM19ks3_WBX04fYMK8K3bQqXPfZP9MCU5tvNjQn0JbK6vA%40mail.gmail.com.

Titouan Rigoudy

unread,
May 11, 2021, 11:13:56 AM5/11/21
to Ian Vollick, blink-dev
Hi there,

It is unclear to me whether this intent covers the MPA use case or not. The explainer mentions the fact that the MPA API is still under discussion, and crbug.com/1200518 only covers the SPA case, yet this intent talks about both SPA and MPA. Could you clarify?

Thanks,
Titouan

On Sat, May 8, 2021 at 12:16 AM Ian Vollick <vol...@chromium.org> wrote:
--

Titouan Rigoudy

unread,
May 11, 2021, 11:14:12 AM5/11/21
to Ian Vollick, blink-dev
Thanks!

Titouan

Rick Byers

unread,
May 13, 2021, 3:22:37 PM5/13/21
to Titouan Rigoudy, Ian Vollick, blink-dev
Do you have one or more partners lined up who actually want to test this out in the wild via OT? With the SPA use case being polyfillable, I imagine the developer interest to test in production might be limited primarily to the MPA scenarios. So I'm just wondering if there's really the demand for an OT of only the SPA use case?

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPATO9dGbd_2AbHUw3g9uTXXR69ePZzHQp0wMrZM3DdPZ%2Bn12A%40mail.gmail.com.

Alex Russell

unread,
May 13, 2021, 3:28:37 PM5/13/21
to blink-dev, Rick Byers, Ian Vollick, blink-dev, Titouan Rigoudy
Hey all,

Discussed today, and Chris reflected that there were partners lined up (he or Ian will follow up here on that point). Even the SPA case seems quite difficult to polyfill, which increases the salience of getting this into developer's hands to play with and get feedback on.

LGTM.

On Thursday, May 13, 2021 at 12:22:37 PM UTC-7 Rick Byers wrote:
Do you have one or more partners lined up who actually want to test this out in the wild via OT? With the SPA use case being polyfillable, I imagine the developer interest to test in production might be limited primarily to the MPA scenarios. So I'm just wondering if there's really the demand for an OT of only the SPA use case?

On Tue, May 11, 2021 at 11:14 AM Titouan Rigoudy <tit...@chromium.org> wrote:
Thanks!

Titouan

On Tue, May 11, 2021 at 5:09 PM Ian Vollick <vol...@chromium.org> wrote:
On Tue, May 11, 2021 at 10:53 AM Titouan Rigoudy <tit...@chromium.org> wrote:
Hi there,

It is unclear to me whether this intent covers the MPA use case or not. The explainer mentions the fact that the MPA API is still under discussion, and crbug.com/1200518 only covers the SPA case, yet this intent talks about both SPA and MPA. Could you clarify?

Thank you for asking. For this OT we'll only support the SPA case.

Thanks,
Titouan

On Sat, May 8, 2021 at 12:16 AM Ian Vollick <vol...@chromium.org> wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@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+unsubscribe@chromium.org.

Chris Harrelson

unread,
May 13, 2021, 5:22:13 PM5/13/21
to Alex Russell, blink-dev, Rick Byers, Ian Vollick, Titouan Rigoudy
(speaking without API owner hat on - I am involved in this particular feature)

On Thu, May 13, 2021 at 12:28 PM Alex Russell <sligh...@chromium.org> wrote:
Hey all,

Discussed today, and Chris reflected that there were partners lined up (he or Ian will follow up here on that point). Even the SPA case seems quite difficult to polyfill, which increases the salience of getting this into developer's hands to play with and get feedback on.

LGTM.

On Thursday, May 13, 2021 at 12:22:37 PM UTC-7 Rick Byers wrote:
Do you have one or more partners lined up who actually want to test this out in the wild via OT? With the SPA use case being polyfillable, I imagine the developer interest to test in production might be limited primarily to the MPA scenarios. So I'm just wondering if there's really the demand for an OT of only the SPA use case?

I don't think it is easy at all to polyfill this feature. Polyfilling would involve complex DOM setups where everything is temporarily duplicated, which is not at all easy to do.

Developers have clearly indicated a lot of interest in the SPA case, as a way to add nice visual transitions to their navigations. One large partner even said that they would really like to add these transitions to their site, but currently it's just too difficult to build and maintain it on the web (and I think they tried, but couldn't justify the maintenance cost). They compared this with native app platforms, where it's as easy as a few lines of code (just as it is with Shared Element Transitions).

Regarding testing in the wild: multiple partners have indicated interest in this API and want to test its integration into their site.
 

On Tue, May 11, 2021 at 11:14 AM Titouan Rigoudy <tit...@chromium.org> wrote:
Thanks!

Titouan

On Tue, May 11, 2021 at 5:09 PM Ian Vollick <vol...@chromium.org> wrote:
On Tue, May 11, 2021 at 10:53 AM Titouan Rigoudy <tit...@chromium.org> wrote:
Hi there,

It is unclear to me whether this intent covers the MPA use case or not. The explainer mentions the fact that the MPA API is still under discussion, and crbug.com/1200518 only covers the SPA case, yet this intent talks about both SPA and MPA. Could you clarify?

Thank you for asking. For this OT we'll only support the SPA case.

Thanks,
Titouan

On Sat, May 8, 2021 at 12:16 AM Ian Vollick <vol...@chromium.org> wrote:
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.

--
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/5b8bf4f2-b5f6-4b92-a1af-283111ccac46n%40chromium.org.

Rick Byers

unread,
May 13, 2021, 5:38:57 PM5/13/21
to Chris Harrelson, Alex Russell, blink-dev, Ian Vollick, Titouan Rigoudy
On Thu, May 13, 2021 at 5:22 PM Chris Harrelson <chri...@chromium.org> wrote:
(speaking without API owner hat on - I am involved in this particular feature)

On Thu, May 13, 2021 at 12:28 PM Alex Russell <sligh...@chromium.org> wrote:
Hey all,

Discussed today, and Chris reflected that there were partners lined up (he or Ian will follow up here on that point). Even the SPA case seems quite difficult to polyfill, which increases the salience of getting this into developer's hands to play with and get feedback on.

LGTM.

On Thursday, May 13, 2021 at 12:22:37 PM UTC-7 Rick Byers wrote:
Do you have one or more partners lined up who actually want to test this out in the wild via OT? With the SPA use case being polyfillable, I imagine the developer interest to test in production might be limited primarily to the MPA scenarios. So I'm just wondering if there's really the demand for an OT of only the SPA use case?

I don't think it is easy at all to polyfill this feature. Polyfilling would involve complex DOM setups where everything is temporarily duplicated, which is not at all easy to do.

Developers have clearly indicated a lot of interest in the SPA case, as a way to add nice visual transitions to their navigations. One large partner even said that they would really like to add these transitions to their site, but currently it's just too difficult to build and maintain it on the web (and I think they tried, but couldn't justify the maintenance cost). They compared this with native app platforms, where it's as easy as a few lines of code (just as it is with Shared Element Transitions).

Oh great, thanks for the details! 

Regarding testing in the wild: multiple partners have indicated interest in this API and want to test its integration into their site.

Perfect, glad to hear it.
Reply all
Reply to author
Forward
0 new messages