No More Flash Cuts: Animating Between Pages
summary
Claim: the View Transitions API gives browser‑native cross‑route animations but integrating it into SPAs requires handling timing. Demonstration uses startViewTransition with a promise to delay the browser’s second snapshot until React finishes DOM updates, which yields smooth cross‑fades in practice. React Router ships support; Next.js currently needs a manual promise/workaround or waiting for the experimental React transition component. Works well for appearance/disappearance and navigation; watch browser support and reduced‑motion preferences.
AI-written summary · about
chapters (11)
- 0:00Page transition animations intro
- 1:30Flash cuts in navigation
- 2:14View Transitions API
- 4:07SPAs with View Transitions
- 5:31View Transitions under the hood
- 6:37Timing issues with async callbacks
- 8:03Simplicity vs animation benefits
- 8:46React integration for View Transitions
- 9:50When to use View Transitions
- 10:32Animated navigation impact
- 11:14Closing remarks
related talks
10mView Transitions: The brand-new browser API that will blow your mind
11mDesigning Page Transitions
21mCSS Between the Pages
32mSupercharge Web UX with View Transitions!
22mA sleek view transitions recipe for web apps
49mSupercharge Web UX with View Transitions
27mAnimate All the Things! (With View Transitions API)
19mView Transitions: Fact vs. Fiction