← Graph

View Transitions API

concept 1 connections

Browser API providing animated transitions in two levels. Level 1 (same-document, SPA-style): one JavaScript call wraps a DOM mutation so the browser animates from the before state to the after state — available in all current browsers, falls back to instant swap in older browsers. Level 2 (cross-document, MPA-style): enabled with a single CSS line for server-side-rendered multi-page navigations, currently supported everywhere but Firefox. Both can be customized and extended with named view-transition-name properties so the browser knows to animate matched elements (e.g. a product card expanding into a detail page). Presented as a way to get app-like fluid UI without SPA baggage.

category
pattern
First of five web-platform APIs presented in the talk.

Provenance

Read by
1 extraction