Intent to Experiment: Shared Element Transitions

382 views
Skip to first unread message

Khushal Sagar

unread,
Jun 8, 2022, 3:11:55 PM6/8/22
to blink-dev, Vladimir Levin, Hannah Van Opstal

Contact emails

khusha...@chromium.orgvmp...@chromium.orghvano...@chromium.org

Explainer

https://github.com/WICG/shared-element-transitions/blob/main/explainer.md

Specification

https://tabatkins.github.io/specs/css-shared-element-transitions

Design docs


https://github.com/WICG/shared-element-transitions/blob/main/explainer.md

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

Link to origin trial feedback summary

https://docs.google.com/spreadsheets/d/1x7IueF5_Ds7oyihAV1DB3yzR4f-SbPcKc5DMvBzg-nM/edit#gid=2085648173

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: Strongly positive
Interest and developer experiments with the API:
https://css-tricks.com/spas-shared-element-transitions-and-re-evaluating-technology/

Other signals:

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 primary security constraint is ensuring isolation of graphics resources from multiple origins. The design achieves that using Chromium's Viz process similar to OOPIFs.

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


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?



Goals for experimentation

Learning from the feedback from the previous OT, the API has been updated to layer on top existing animation systems on the platform. This allows the browser to provide a set of default transitions which developers can extensively customize. We want to learn that developers can easily adopt this API and build the desired UX using the customization options provided.


Reason this experiment is being extended


Ongoing technical constraints

None.


Debuggability

The feature can be debugged using standard tooling in devtools. Specifically the animation panel can be used to pause and scrub through the default animations set by the browser. The pseudo DOM structure generated by the UA can also be inspected and targeted, like other DOM elements, in the style panel.


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. This is WIP.


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

Yes

Flag name

DocumentTransition

Requires code in //chrome?

False

Tracking bug

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

Estimated milestones

OriginTrial desktop last107
OriginTrial desktop first104
OriginTrial Android last107
OriginTrial Android first104


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.

Khushal Sagar

unread,
Jun 8, 2022, 3:27:21 PM6/8/22
to Khushal Sagar, blink-dev, Vladimir Levin, Hannah Van Opstal
One fix, the last milestone for the OT is 106. So it's targeted for 3 milestones 104-106 (inclusive). The end date will be October 18, 2022.

Yoav Weiss

unread,
Jun 9, 2022, 4:35:23 AM6/9/22
to Khushal Sagar, blink-dev, Vladimir Levin, Hannah Van Opstal
LGTM to experiment M103-M106

Thanks for working on this! I'm super excited about the possibilities this will open!!

--
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/CAMLuWUy2%3DZk_C64CJjCjxKfKbH6XHEzTLO5cWd%3D_H6GUCzNAWg%40mail.gmail.com.

Nicola Tommasi

unread,
Jun 13, 2022, 11:49:31 AM6/13/22
to blink-dev, Yoav Weiss, blink-dev, Vladimir Levin, Hannah Van Opstal, Khushal Sagar
Hi API owners,

This intent seems to be already approved in the past for same-origin experimentation, is this launch intended for the cross-origin case?If not, what's exactly in the scope for this particular launch?

Thanks,
Nicola

On Thursday, June 9, 2022 at 8:35:23 AM UTC Yoav Weiss wrote:
LGTM to experiment M103-M106

Thanks for working on this! I'm super excited about the possibilities this will open!!

On Wed, Jun 8, 2022 at 9:27 PM Khushal Sagar <khusha...@chromium.org> wrote:
On Wed, Jun 8, 2022 at 3:11 PM Khushal Sagar <khusha...@chromium.org> wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Hannah Van Opstal

unread,
Jun 13, 2022, 11:49:45 AM6/13/22
to Nicola Tommasi, blink-dev, Yoav Weiss, Vladimir Levin, Khushal Sagar
Hi Nicola, 

This experimentation is still for the same-origin case. 
The difference is in the shape of the API. The first intent was approved for the API when it was using Viz. With Viz Shared Element Transitions, we did an origin trial where we received some feedback that led us to change it to use the renderer. So this new intent would be intended for the newer shape - i.e. renderer SET. 

Please let me know if we can provide any more details.

Hannah 





On Mon, Jun 13, 2022 at 7:16 AM Nicola Tommasi <tomm...@chromium.org> wrote:
Hi API owners,

This intent seems to be already approved in the past for same-origin experimentation, is this launch intended for the cross-origin case?If not, what's exactly in the scope for this particular launch?

Thanks,
Nicola

On Thursday, June 9, 2022 at 8:35:23 AM UTC Yoav Weiss wrote:
LGTM to experiment M103-M106

Thanks for working on this! I'm super excited about the possibilities this will open!!

On Wed, Jun 8, 2022 at 9:27 PM Khushal Sagar <khusha...@chromium.org> wrote:
On Wed, Jun 8, 2022 at 3:11 PM Khushal Sagar <khusha...@chromium.org> wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.

Joe Medley

unread,
Jun 13, 2022, 1:26:52 PM6/13/22
to Hannah Van Opstal, Nicola Tommasi, blink-dev, Yoav Weiss, Vladimir Levin, Khushal Sagar
Is the experiment 103 to 106 or 104 to 107.
Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195
If an API's not documented it doesn't exist.


Nicola Tommasi

unread,
Jun 14, 2022, 3:39:00 AM6/14/22
to blink-dev, Joe Medley, Nicola Tommasi, blink-dev, Yoav Weiss, Vladimir Levin, Khushal Sagar, Hannah Van Opstal
Thanks for the info Hannah, I don't need more details at this stage.

Nicola

On Monday, June 13, 2022 at 5:26:52 PM UTC Joe Medley wrote:
Is the experiment 103 to 106 or 104 to 107.
Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195
If an API's not documented it doesn't exist.


On Mon, Jun 13, 2022 at 8:49 AM 'Hannah Van Opstal' via blink-dev <blin...@chromium.org> wrote:
Hi Nicola, 

This experimentation is still for the same-origin case. 
The difference is in the shape of the API. The first intent was approved for the API when it was using Viz. With Viz Shared Element Transitions, we did an origin trial where we received some feedback that led us to change it to use the renderer. So this new intent would be intended for the newer shape - i.e. renderer SET. 

Please let me know if we can provide any more details.

Hannah 





On Mon, Jun 13, 2022 at 7:16 AM Nicola Tommasi <tomm...@chromium.org> wrote:
Hi API owners,

This intent seems to be already approved in the past for same-origin experimentation, is this launch intended for the cross-origin case?If not, what's exactly in the scope for this particular launch?

Thanks,
Nicola

On Thursday, June 9, 2022 at 8:35:23 AM UTC Yoav Weiss wrote:
LGTM to experiment M103-M106

Thanks for working on this! I'm super excited about the possibilities this will open!!

On Wed, Jun 8, 2022 at 9:27 PM Khushal Sagar <khusha...@chromium.org> wrote:
On Wed, Jun 8, 2022 at 3:11 PM Khushal Sagar <khusha...@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.

Khushal Sagar

unread,
Jun 14, 2022, 10:29:59 AM6/14/22
to Joe Medley, Hannah Van Opstal, Nicola Tommasi, blink-dev, Yoav Weiss, Vladimir Levin, Khushal Sagar


On Mon, Jun 13, 2022, 1:26 PM Joe Medley <jme...@google.com> wrote:
Is the experiment 103 to 106 or 104 to 107.

It's 104-106 (inclusive). The last date is October 18, 2022.

Khushal Sagar

unread,
Jun 21, 2022, 11:14:49 AM6/21/22
to Khushal Sagar, Joe Medley, Hannah Van Opstal, Nicola Tommasi, blink-dev, Yoav Weiss, Vladimir Levin
Quick update, the feature is supported on WebView starting in M105. Depending on the progress of OT support for WebView (here), the feature will be available for OT on WebView for 105-106 (inclusive).

Joe Medley

unread,
Jun 21, 2022, 12:08:17 PM6/21/22
to Khushal Sagar, Hannah Van Opstal, Nicola Tommasi, blink-dev, Yoav Weiss, Vladimir Levin
Thanks!

Joe Medley | Technical Writer, Chrome DevRel | jme...@google.com | 816-678-7195
If an API's not documented it doesn't exist.

Reply all
Reply to author
Forward
0 new messages