#631: Shared Element Transitions - Early Review
Discussions
Discussed
May 31, 2021 (See Github)
Lea: not had time to look
Sangwhan: same
Hadley: user needs would be helpful. Jumps straight into how it works, features in android
Lea; they're assuming it's obvious, but it's not
Dan: there's a video.. Unclear what they're displaying
Lea: unclear why they can't do it with existing CSS transitions and animations, or an improvement that is incremental instead of a different API.
Dan: there's previous efforts but no alternatives examined in the explainer.
Lea: is it page navigation transitions?
Sangwhan: except it's not really a page, but a state transition between to pages in a SPA
Lea: transiiton between two states in a SPA can be done with CSS transitions already. If it's a page transition that cannot be done right now. Significant difference.
Sangwhan: I don't think it's a full page transition
Ken: it's called element transition
Sangwhan: they have this promise they're resolving and it seems like..
Lea: I would like explanation on why existing web platform tech can't deal with these use cases
Dan: it says with some work the above effects can be achieved with existing frameworks. But don't say what they mean by that.
Ken: maybe this is to make it easier. A lot of people have wanted something like this for a long time but couldn't have have figured out how to do it. We had other efforts in this area, navigation animations etc before. Navigation transition design.. about having these animations, if you load a new page it ends up in the same page so will look like a nice transition instead of one load, another load.. you can do it today but it's difficult and a lot of people have no idea how. THey should state that this is about making it easier to use for developers.
Lea: so it's about having a bunch of transitions so developers don't have to thinka bout which properties to animate to what values
Ken: so it's loading another page over the same thing, loading a different document, and those things will line up. From google search you can click something, it animates out and loads a different page
Lea: point is that CSS transitions are too low level
Ken: that would be my guess, but they should make that clear. Coordination between different pages to make sure everything just works. Scrolling etc.
Yves: isn't it more about page contexts?
Ken: previous effort was having different pages loading, something animated so it looks like a smooth transition. Especially the use case was that you don't always control everything so you have to coordinate, eg. between google search and google maps, and they'd like it to look very integrated.
Sangwhan: I'd love to see their explanation of use acses. Example code doesn't give us much of an idea.
Hadley: and what they're trying to accomplish
Lea: I can write a comment, what I'm hearing is they need to describe use cases, how existing web platform features do not cover these..
Ken: or how this makes it much easier or more approachable to developers
Lea: is it about making CSS transitions more approachable, or does it do something that CSS transitions can't do today?
Hadley: sounds like we have questins about the user needs, and the developer needs. May have opinions on either or both.
Lea: Right
Dan: if it's doing something in a more easy way, that can be done using CSS transitions, it should be built on top of CSS transitions, layered approach that we promote, rather than a separate thing. Important to ask if it does something CSS transitions can't do.
Lea: exactly
Ken: about coordination between different sites, if it's going to ease that. Seems to be coordination required between different documents if you want to animate something together. Is it making that easier? Thinking about previous efforts. Don't see much in this document and don't get the examples. Could imagine that you make an animation and the new page gets the values where it ended up so it can show something at that place.
Lea: [will comment]
Ken: they have this shared element.. trying to understand how it's shared.. oh its a selector list. Confused that it's called elements if it's a selector list.
Dan: looking at S&P..
Ken: loading new page in the background.. and it will animate between the old document and the new document. I think that is the new thing, you don't have access to two different documents. Example, document transition start, and give it a list of shared elements, and document new.. in prepare you give it the old one. So it's going to load the new one in the background?
Dan: the multi page API?
Ken: looking at shared element transitions example
Dan: they say the multi page API is still being designed, link to an issue
Ken: multi page is across origin?
Dan: SPA transition case has a working API, but MPA equivalent unsure, needs design. Linked from their S&P, their issue 2
Ken: not in the explainer. Second example looks designed to work across pages. Guess it could also work on the same page.
Dan: privacy issue they highlight is in the cross site navigation transition case... whether source and destination need to opt in to the API to learn about the content of the destination or vice versa. API allows customisation of UX when navigating between two sites. Is it okay without destination explicitly opting in to this behaviour? I'm on .... reddit, and I'm linking to CNN.. and both sites have opted in to use the transition API, and I then get some kind of animated transition that brings me to the CNN article. I don't get what the problem is.
Sangwhan: question about accessibility. Animations should be controllable as a preference.
Dan: Right.
Ken: this seems to be a specific API to do the flip animation that people are doing today. Abstract that a way,a nd maybe designed in a way that could work across documents.
Sangwhan: tricky bit is there has to be a story on how users can opt out of this. Don't see that here.
Lea: prefers reduced motion? Or a different opt out?
Sanghwan: yeah for example. No way to opt out, no accessibility story
Ken: can you do that with web animations today?
Sangwhan: I think so? If not, that's a bug.
Lea: idea is web devs are supposed to check the media query.
Ken: yeah
Lea: wouldn't be good if turning that optin on would blanket cancel any animation that's already running. Reduced motion is not zero motion, some is okay, some is slow, some might not result in any motion... I think it's okay to leave it up to the developer, but that's a different issue.
Dan: ask them to clarify the issue in the S&P. They've asked a question. Is it okay to show a transition to a shared element on a destination site without the site opting in. And I don't understand this case. I want them to flesh this out a bit.
Ken: seems a bit scary.. if you depend on another site to do animations.. no coordination is going to be terrible UX
Dan: I don't think this opt out.. need to clarify. I'll leave that as a separate comment.
Draft comment:
Hi there @ianvollick!
We looked at this today during a breakout and we had several questions for you:
- The explainer currently lacks a list of use cases, so it's difficult to assess whether this covers the user needs and developer needs it was designed to address, or even what these are.
- It was unclear to us whether this API adds new functionality that is not possible using existing Web Platform features (such as CSS transitions and animations, or Web Animations), or whether it's a higher level abstraction of commonly needed functionality that is already possible, just harder.
- It was unclear to us what the reasoning is for an entirely new API over a more layered approach over the existing Web Platform features mentioned above.
Could you please clarify?
``
Comment by @torgo Jun 1, 2021 (See Github)
Hi @ianvollick. Thanks for raising this to us. We're just discussing in today's call and one question that I had is: can you clarify the issue you've raised in the security & privacy answers regarding sites opting in to this behaviour (possibly with a specific example)?
Comment by @LeaVerou Jun 1, 2021 (See Github)
Hi there @ianvollick! We looked at this today during a breakout and we had several questions for you:
- The explainer currently lacks a list of use cases, so it's difficult to assess whether this covers the user needs and developer needs it was designed to address, or even what these are.
- It was unclear to us whether this API adds new functionality that is not possible using existing Web Platform features (such as CSS transitions and animations, or Web Animations), or whether it's a higher level abstraction of commonly needed functionality that is already possible, just harder.
- It was unclear to us what the reasoning is for an entirely new API over a more layered approach over the existing Web Platform features mentioned above.
Could you please clarify?
Comment by @ianvollick Jun 7, 2021 (See Github)
Thank you for taking a look! Responses inline.
Hi @ianvollick. Thanks for raising this to us. We're just discussing in today's call and one question that I had is: can you clarify the issue you've raised in the security & privacy answers regarding sites opting in to this behaviour (possibly with a specific example)?
In this case, I'd flagged this since I thought this would be of interest to the landing site rather than the user. In that sense, this may not be a Security & Privacy issue (though this could be impacted by the eventual design of the multi-page API [1]).
I can certainly give some more detail, though. Say we have a page that wants to link to another site (perhaps a recipe) and would like to animate a hero image into place on the second page. On page A, the image might be a picture of a pie, and on page B, this might be a picture of the ingredients on the table and the transition would slide the image into place.
Now, say site B would prefer not to have such a transition to their page. We had suggested in the questionnaire that site B could state a preference that this not happen, but an opt-in is also something that we're considering and may be the right approach in some cases.
[1] For example, if we go with a declarative API, we don't expect this to be observable by script, and if the Security & Privacy Questionnaire responses change as multi-page API is developed, we will request a re-review.
Hi there @ianvollick! We looked at this today during a breakout and we had several questions for you:
- The explainer currently lacks a list of use cases, so it's difficult to assess whether this covers the user needs and developer needs it was designed to address, or even what these are.
- It was unclear to us whether this API adds new functionality that is not possible using existing Web Platform features (such as CSS transitions and animations, or Web Animations), or whether it's a higher level abstraction of commonly needed functionality that is already possible, just harder.
- It was unclear to us what the reasoning is for an entirely new API over a more layered approach over the existing Web Platform features mentioned above.
Could you please clarify?
Here's a list of a few possible use cases
- When navigating from a list-page to a details-page, the site author may want a) the picture of the item, and b) the name of the item to persist through the transition and animate into position when changing states. An animated example is shown here.
- cover-<direction> / reveal-<opposite direction>
- Can be used to create a "slide to next/prev card in a series" effect. An animated example of that is given here (please see the "Relationships" section).
- explode / implode
- Can be used to, semantically, show that the user is adding/removing a new state on a stack (eg showing/hiding settings menu). This is also illustrated by the example above.
- Providing visual context or seamless flourish for the user when navigating between different sites or pages within a site. For example, say on page A, we have a small card containing a link and the author would like the card to stick around and hover for a moment while the next page B loads and renders, then animates into place.
It isn't possible to achieve these effects in a multi-page application (MPA) since elements cannot persist across a transition between pages. Some folks end up creating SPAs just to create these kinds of effects, and wouldn't have to once we have an MPA-friendly API. In the SPA case, it is certainly possible to create many of these effects today, though it is cumbersome. In our research, it has proven so cumbersome that sites often simply don’t do it (two very large, well-funded, non-Google web properties told us as much). The complication with SPAs is that we need to have live DOM available for both states at the same time, and it's common to get the details wrong (eg, old state might remain clickable, the outgoing state may stick around after the transition), leading to difficult-to-debug issues and can have a negative impact on accessibility. We feel that an API such as this would make authoring this sort of transition extremely easy, and offer better performance and user agent control (e.g. to skip animations when the user doesn't want it).
The question of whether we could layer atop existing APIs is a good one and related to some developer feedback we've already received [2]. We certainly aim to permit customization of these effects (we're currently preparing for an origin trial to learn more about what customizations are most needed), but the initial API shape was chosen to provide a convenient way to "snapshot" page state at a given point of time and provide UA-defaults for common transitions.
That said, I think this API could definitely be made more idiomatic and reuse concepts (eg, using easing functions to specify curves, or something like the suggestion in [2]). I expect that this will evolve a lot in the specification process – this is a very early review; the multi-page API hasn't even been sketched (and for this, one approach we're considering is entirely CSS-based).
[2] https://github.com/WICG/shared-element-transitions/issues/28
Discussed
Jul 26, 2021 (See Github)
(Punted from breakout C)
Lea: I asked if this could punted to plenary. I did take a closer look today. It does seem like something that needs solving and there is a need for it. But I am not quite sure how this proposed API is supposed to work. Seems that the primary need is for MPAs which is not specified here. Not sure this can be designed without that. Even the SPA case - there is a code example in the explainer. Not sure how this is suppsosed to work.
Rossen: on Tuesday during our CSS call - what was the overall outcome?
Lea: in general they were positive. I posted a link to Jake's talk. which talks about the problem statement but not about the API. So the working group was positive.
Tess: yes I think everyone understands the problem statement - the devil is in the details.
Lea: The review does show an API sketch.
Tess: why isn't this going to the CSS working group?
Rossen: procedurally - I think this is a case where they are engageing in an early preview- we have encouraged that in the past. This is the idea stage. At that altitude this is a good review to have - to justify the use cases and technical path forward. This feels like they are a bit more off-shore - they have already designed it and implemented - so this not an idea review. In which case I would expect a technical proposal.
Tess: at the beginning they say similar to material design principles -- there are other things that come to mind - e.g. in IOS. What about powerpoint? Transitions between slides... I would think they would look at slide to slide transitions in powerpoint and keynote...
Lea: The primary complexity is they are not just interested in transitions between pages - but also where specific elements in one page morph into specific elements in another page.
Tess: powerpoint (e.g.) does that.
Sangwhan: I don't see how the SPA version can evolve into an MPA version... based on the current design. Agree with the problem statement though.
Peter: I get the MP issue - but with a SP what does this do you can't do with CSS transitions?
Lea: more high level - this takes care of things that are hard with CSS transitions.
Sangwhan: the MP thing sounds like a complex problem.
Rossen: intended to work between pages that know eachother?
Lea: an open problem - an opt in where both pages could declare or maybe a limited set of transitions?
Sangwhan: would have to have a preload feature if you want to support MP...
Peter: unless both pages opt in and collaborate you'd have to clamp down on transitions - otherwise security issues
Discussed
Jul 26, 2021 (See Github)
some responses to Lea's comments
Lea: sounds like multipage transitions are ones this is useful for but not speced yet. Seems like it's an essential part of this API..
Dan: not clear from the feedback if they are going to refactor to layer based on existing APIs or not...?
Lea: i will take a closer look let's revisit at the plenary.
[punted to plenary]
Comment by @hober Jul 28, 2021 (See Github)
The inspiration for this feature are transitions similar to the ones listed in the Material Design Principles.
The intent is to support transitions similar to Android Activity Transitions.
I can think of two other sources you should look at.
- One, you're looking at Android but not iOS. I assume both operating systems have existing behavior you could support.
- Two, PowerPoint and Keynote both have inter-slide transitions that allow specific elements on each slide to morph into a corresponding element on the next/prev slide. These program's default set of inter-slide transitions should probably be pretty high priority.
Comment by @cynthia Jul 28, 2021 (See Github)
One, you're looking at Android but not iOS. I assume both operating systems have existing behavior you could support.
and Windows, for completeness.
Comment by @khushalsagar Jul 28, 2021 (See Github)
Thanks hober and cynthia! Those are definitely good areas to look at for inspiration in researching this space more.
Discussed
Aug 30, 2021 (See Github)
Ken: nice API...
[discussion on this issue - there is going to be a CSS breakout tomorrow on this topic...]
Ken: one thing missing is the use cases .. should be in the explainer...
[consensus that this not ready to close]
Dan: will more info come out of the CSS session?
Rossen/Lea: yes.
Resolved to wait until feedback from CSS session - bump to next week.
Discussed
Sep 1, 2021 (See Github)
Lea: we delayed this because of a CSS wg breakout on this topic... . My takeaway so far - the discussions around these shared element transitions - without getting too low level into the detais... have not seen a complete proposal that addresses the multi-page transitions that is the primary use cases.. useful but doesn't address the thing people want fromt this feature... complete api needs to be there that does this. Don't think it's the time to discuss the implementation details without knowing what the API looks like. How do authors specify this transitions? this feels to me to be in brainstorming stage.
Dan: that kind of matches my estimation of this -- good idea, but both pages need to opt in, then what happens/ Isn't there a privacy issue massively?
Lea: we could figure out privacy issues with an actual API.. I don't think we have something to review. Even if there are no security issues anywhere there is still the problem of how you express these things? How you expose things? How do authors specify things?
Dan: is that surfaced in the discussion?
Lea: there is a lot of drilling down into details but not big picture
Dan: so we should raise the higher level issue?
Lea: I think so but I'd like feedback from others
Sangwhan: the really complicated case is not defined at all?
Lea: they see the problem that needs solving, but we can't review just the problem, we need to review a proposed solution as well
Sangwhan: the bit they gave us looks okay but the bit that was not defined at all is the one we should have to review intensively because it seems hard. But it's not defined at all.
Lea: I don't think it's wise to review the smaller part and leave the other part for future. Thye need to be designed together. The API should work for both cases, not two completely different APIs. Any time the web platform provided canned effects they ended up not being used becuase designers wanted to do their own thing - web platform should define primitives so designers can do what they want.
Dan: what's the current state of this issue? Feedback from tess and sangwhan in july.. responses to lea's comment..
Lea: in the actual TAG review the comment is good areas to look at for inspiration..
Dan: if we leave a comment to the tune of what you were saying just now could we do that and say come back to us when you've got more to review? Right now we don't feel there's enough of a concrete proposal here? Therefore could we close it? If we keep coming back to it and circulating on this issue but there's nothing further look at maybe we need to ask them to reopen when they have a more concrete proposal
Sangwhan: sure
Lea: makes sense. I can leave a comment.
Dan: let's do that, and close with that if it's okay, with prioviso to ask for it to be reopened when it's ..
Lea: what resolution?
Dan: too early
Sangwhan:
Apologies for the long delay! We discussed this at length during our VF2F, and while we think this would be a great addition to the platform, it's also a scary+open ended feature. The design itself I think makes a lot of sense and we are happy with it, but we'd like to see this being tried out in the wild (say, with some early adopters) and getting their feedback would be useful to know if there are details/features that we potentially missed in the initial design.
Do you think it would make sense to give it a trial run in the wild, and re-open after seeing what kind of feedback comes back? (presumably, also with updates to the design)
Comment by @LeaVerou Sep 14, 2021 (See Github)
Hi @ianvollick!
We looked at this again during a breakout in our Gethen (V)F2F today.
In terms of the proposal that is outlined in this explainer, we feel that an API for Shared Element Transitions (SETs) should provide the kinds of primitives that designers can use to define transitions, not only expose a small predefined set of “canned” effects, which tends to not scale well over time as design trends and collective aesthetics evolve.
But more importantly, while SETs in SPAs are useful, we still feel that MPAs are by far the primary use case and the SET API needs to be designed with both in mind. We don’t want to end up with two separate SET APIs, one for SPAs and one for MPAs. The current proposal only works for SPAs with no obvious way to extend it to MPAs. SETs for MPAs appear to be in the early brainstorming phase, so there is not much for us to comment on, besides that we certainly recognize that there is a strong user need.
Therefore we are going to close this and look forward to reviewing it again in the future when there is a concrete API proposal to review.
Comment by @ianvollick Mar 22, 2022 (See Github)
Hi TAG,
We’ve taken your feedback and updated our proposal. The new explainer describes an API that is built on existing animation primitives. Specifically, the API creates new pseudo-elements that are targetable by CSS and a set of default CSS animations. Developers can target these pseudo elements using existing CSS concepts and animation APIs (CSS transitions, animations and Web Animations) to customize their transitions.
This explainer also delves deeper into how this API will work in a same-origin different-document navigation. We believe that the updated API can serve both the SPA and MPA use-cases.
We would appreciate it if you could take another look at this proposal. We look forward to your comments and thanks in advance!
(Would you be able to reopen this issue while the discussion continues?)
Comment by @vmpstr Jun 9, 2022 (See Github)
Note that a draft of the spec for SPA portion available here https://tabatkins.github.io/specs/css-shared-element-transitions/. This doesn't include MPA transitions, but those should be described in some detail in the explainer.
Comment by @khushalsagar Jun 16, 2022 (See Github)
The review for the updated API is being discussed here.
OpenedMay 7, 2021
Ya ya yawm TAG!
I'm requesting a TAG review of the Shared/Root Element Transitions API.
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).
The inspiration for this feature are transitions similar to the ones listed in the Material Design Principles.
The intent is to support transitions similar to Android Activity Transitions.
In the SPA case, this entails capturing pre-transition visuals, updating the page, and animating to the post-transition state. The API for MPAs is still being designed (issue here).
Further details:
We'd prefer the TAG provide feedback as (please delete all but the desired option):
☂️ open a single issue in our GitHub repo for the entire review