An Animated Journey through the new Page Transition API
summary
New Page Transition API claims nativelike shared‑element transitions between SPA and MPA pages, available behind chrome://flags/#document-transition in Chrome Canary and working in recent Chrome versions. It uses createDocumentTransition/start to capture an outgoing screenshot and an incoming live DOM, supports per‑element animation via page-transition-tag (currently requiring contain paint), allows CSS or Web Animations with an RAF/promise caveat, and demos show meaningful action‑driven animations but note the implementation is still changing and sometimes breaks.
AI-written summary · about
chapters (12)
- 0:00Page Transition API intro
- 1:50What the API does
- 3:13Page transitions example
- 7:32Live API demo
- 10:00Meaningful animations
- 12:29Animating with tags
- 14:37Action-driven animations
- 17:08JavaScript integration
- 19:15Shared element transitions
- 22:30Crossfading shared elements
- 23:11MPA support future
- 24:19Call to action
related talks
13mBringing page transitions to the web
33mMPA View Transitions are here!
10mView Transitions: The brand-new browser API that will blow your mind
21mCSS Between the Pages
04mIntuitive Web Experiences with the View Transitions API
32mSupercharge Web UX with View Transitions!
19mView Transitions: Fact vs. Fiction
21mCSS Between the Pages