Thread by @bramus

🔥🔥🔥

`document.documentTransition` is a new experimental API in @ChromiumDev that allows you to create transitions between two different visual frames.

🔗 chromestatus.com/feature/519300…

Let's dig in … 🧵

@ChromiumDev In this example you see the API transition between the frame with the avatar and the frame with the info modal. The transition — including "slide up" animation — is handled by the API/browser.

🔗 codepen.io/bramus/pen/rNj…

This is called a Root Transition.

@ChromiumDev To make it work, you need to perform 3 steps:

1. Capture the begin frame
2. Make UI changes (which are not rendered on screen)
3. Transition to the new (target) frame

@ChromiumDev Here's some code:

```
const transition = async () => {
// Capture
await document.documentTransition.prepare({
rootTransition: "cover-up",
});

// Update UI
document.body.classList.add('show-modal');

// Transition
document.documentTransition.start();
};
```

@ChromiumDev Allowed `rootTransition` values:

- reveal-x: old content slides from center in direction x, revealing new content.
- cover-x: new content slides from an edge in direction x, covering old content.
- explode
- implode

See this video for a visual demo:

@ChromiumDev What's pretty cool about this API is that is also supports Shared Element Transitions.

It allows you to mark elements that exist in both frames.

While the Root Transition runs, Shared Elements — here the avatar — are transitioned independently.

🔗 codepen.io/bramus/pen/VwP…

@ChromiumDev To use Shared Elements, you need to pass each into `.prepare()` and `.start()`:

```
await document.documentTransition.prepare({
…
sharedElements: [
$elInStartFrame,
]
});

…

document.documentTransition.start({
sharedElements: [
$elInTargetFrame,
]
});
```

@ChromiumDev You can pass in as many as you want, as long as they both have the same number of entries. They're matched against each other using their index.

@ChromiumDev For Shared Element Transitions to work though you need to enable CSS Paint Containment on them:

```css
.elInStartFrame, .elInTargetFrame, {
contain: paint;
}
```

@ChromiumDev 👨‍🔬 To use this API today, enable the `#document-transition` flag in your Chromium-based browser (Chromium 89+), or register your page for the Origin Trial once it's up on developer.chrome.com/origintrials/ (Chromium 92+)

@ChromiumDev Fin.