View Transitions: The brand-new browser API that will blow your mind
summary
View Transitions API lets pages animate between states using a simple JS call or just CSS across pages: use startViewTransition for SPAs or include the small CSS snippet for MPAs. Browsers build pseudo-element snapshots (old/new) and match elements by view-transition-name (there’s a default root), then animate enter/exit or automatically morph position/size. Demos run on Chromium and Safari, include multi-page pure HTML/CSS with no JS, require occasional custom animations to fix jank, and work reliably today.
AI-written summary · about
chapters (9)
- 0:00Introduction to transitions
- 1:07The problem with old methods
- 2:07Introduction to API
- 2:54Triggering transitions
- 3:35Under the hood
- 5:30Simple transition demo
- 6:43Customizing animations
- 7:28Advanced element targeting
- 8:37Final showcase and closing
