View Transitions API Patterns

Quick Guide: The browser screenshots the old state, holds the new one live, and animates between them as a tree of pseudo-elements. document.startViewTransition() drives a same-document change; @view-transition { navigation: auto } on both pages drives a cross-document one. view-transition-name pulls an element out of the root snapshot so it can travel on its own, and the whole animation is customised in CSS rather than in script.

Detailed Resources:

• examples/core.md — feature detection, state transitions, the three promises, skipping, CSS overrides
• examples/spa.md — theme reveal, form steps, tab panels, accordions, list reordering, reduced motion
• examples/shared-elements.md — hero animations, multi-element cards, cross-document pairs, modals
• reference.md — naming rules, pseudo-element tree, browser support, API tables

Which path applies