Bringing page transitions to the web
summary
A new page transition API in Chrome Canary captures before/after screenshots (enable the document-transition flag), exposes them as pseudo-elements driven by CSS animations and the Web Animation API, and lets separately captured regions (header, title, video embed) animate as siblings. Demos show thumbnails declared as the video’s before state smoothly growing into the embedded player, responsive overrides, a prefers-reduced-motion check, and pairing with the Navigation API to detect forward/back and pick different transition directions.
AI-written summary · about
chapters (3)
related talks
26mAn Animated Journey through the new Page Transition API
10mView Transitions: The brand-new browser API that will blow your mind
32mSupercharge Web UX with View Transitions!
22mFLIP no more; Viva View Transitions
33mMPA View Transitions are here!
21mCSS Between the Pages
04mIntuitive Web Experiences with the View Transitions API
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions