The View Transition API

The View Transition API is a rather new API. In this section you can find…

• …some basic examples of same-document and cross document view transitions.
• …information about the structure of the pseudo-elements of the API.
• …and about the mechanisms of the default animations.
• …some background on how to style view transitions.
• …details on how to use the JavaScript API for same-document view transitions.
• …all there is to know about the stacking behavior of view transitions.

While I add more pages, I’m also happy that I can offer some links to previous work on the astro-vtbot package↗:

• An Overview↗ and a Details↗ article on the API
• An in depth same-document example↗

References

W3C Drafts (Preliminary Specs)

• Level 1: CSS View Transitions Module Level 1 (Editor’s Draft) https://drafts.csswg.org/css-view-transitions-1/↗

• Level 2: CSS View Transitions Module Level 2 (Editor’s Draft) https://drafts.csswg.org/css-view-transitions-2/↗

MDN

• The Documentation of the View Transition API on MDN https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API↗

Explainers

• The Level 1 View Transition API Explainer at W3C/WICG: https://github.com/WICG/view-transitions/blob/main/explainer.md↗
• The Level 2 View Transition API Explainer at W3C/WICG: https://github.com/WICG/view-transitions/blob/main/cross-doc-explainer.md#pageconceal↗

Must Reads

Highly recommended introductions by examples and deep dives:

• Jake Archibald’s Same-document view transitions for single-page applications https://developer.chrome.com/docs/web-platform/view-transitions/same-document↗

• Bramus’ Cross-document view transitions for multi-page applications https://developer.chrome.com/docs/web-platform/view-transitions/cross-document↗

• Jake’s eye-opening article on how to handle aspect ratio↗

• A collection of same-page and cross-page examples↗ from Bramus.