Making A Splash With View Transitions
summary
Shows how the browser View Transitions API animates DOM changes with minimal JavaScript, using document.startViewTransition to wrap mutations and view transition name to track nodes across states. Demos include a grid box, isotope‑style filtering where display:none elements animate, and an Angular to‑do list wired with applicationRef.tick and a router feature; it works well in Chrome and Safari Tech Preview but is global (unscoped) today, needs per‑item naming as a workaround, and lacks Firefox support.
AI-written summary · about
chapters (9)
- 0:00Intro
- 3:10What are View Transitions
- 11:38Review Transitions
- 16:03Adding Transitions
- 18:00Applicability
- 18:58Router
- 21:48Animations
- 22:07The Future
- 25:21Questions
related talks
10mView Transitions: The brand-new browser API that will blow your mind
32mSupercharge Web UX with View Transitions!
27mAnimate All the Things! (With View Transitions API)
49mSupercharge Web UX with View Transitions
04mIntuitive Web Experiences with the View Transitions API
19mView Transitions: Fact vs. Fiction
22mFLIP no more; Viva View Transitions
45mCSS tried to come for my Job