Re: [csswg-drafts] [css-view-transitions-1] keep ::view-transition-old(root) screenshot (#8830)

I think this is a good idea in terms of an API which reuses a subset of the concepts in ViewTransitions.

The model with ViewTransitions is the following:

1. Capture previous view state as an image.
2. Create live images from new view state.
3. Build a new stacking layer (which sits on top of the Document) to animate between old and new images (built from the view states).

Because its meant to be a transient effect, we're ok with an inert stacking layer on top of the entire Document. For this use-case, you want the new DOM to be interactive and sit on top of a snapshot of the old view state. So you don't need 2 and 3 above. Just 1 with the ability to use that image.

We talked about a primitive like this. In fact, I think its API shape can be very similar to the existing [CSS element() function](https://developer.mozilla.org/en-US/docs/Web/CSS/element). Except that feature is about live images of existing DOM vs you want snapshots of previous DOM state. Since this snapshot mechanism has to be async, we need a bit of script. For example:

```js
async function SetUpBackground() {
   let image = await element.takeSnapshot();
   document.body.background = "snapshot(image.id)";
}
```

So you call an async script function to capture an element. Then hook that up to the background of any DOM element. We'll need to sort out ownership of the captured image, once you set it in CSS the element which is using it as a background should keep it alive. But the handoff from script to CSS is tricky.

We can't give authors access to the image contents since it could have cross-origin data but this is the same restriction that VT works with. FWIW native platforms (like Android) also have APIs to snapshot parts of the UI so it seems like a good addition for the web.

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8830#issuecomment-1544848739 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 11 May 2023 23:38:20 UTC