Last updated: First published:
The View Transition API
The View Transition API is a rather new API. Eventually, this site will hold more background information about the API.
I made a start with …
- … information about the structure of the pseudo-elements of the API
- … and about the mechanisms of the default animations.
- Recently I also added some background on how to style view transitions.
While I add more pages, I’m also happy that I can offer some links to previous work on the astro-vtbot package1.
- An Overview↗ and a Details↗ article on the API
- An in depth same-document example↗
References
Copied over from astro-vtbot↗
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↗
W3C Drafts
-
Level 1: The W3C Candidate Recommendation Snapshot: CSS View Transitions Module Level 1 https://drafts.csswg.org/css-view-transitions-1/↗
-
Level 2: The Editor’s Draft: CSS View Transitions Module Level 2 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↗
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.