Notes On Work - by Caleb Porzio How ViewTransitions work
Jan 9, 2026
Caleb dives into the magic of view transitions, discussing how they enhance user experience in web applications. He explains the history behind wire transitions, the mechanics of document.startViewTransition, and the importance of naming elements for smooth morphing. Practical examples reveal how these transitions compare to traditional animations, even showcasing their use in presentations. Caleb also addresses challenges like timing issues and the quirks developers face, all while exploring how to seamlessly integrate with tools like Livewire.
AI Snips
Chapters
Transcript
Long Road Rebuilding Wire Transition
- Caleb Porzio recounts rebuilding a Livewire feature called wire transition across multiple major versions.
- He removed, reintroduced, and rewrote it until Livewire 4 made it work well with view transitions.
How View Transitions Work
- View transitions are a native browser API for smoothing visual changes across page or single-page mutations.
- Document.startViewTransition takes a callback that snapshots before/after states and transitions between them automatically.
Name Elements For Precise Transitions
- Give elements view-transition-name to enable targeted morphing instead of blind crossfades.
- Use unique names or the match-element keyword to let the browser interpolate position and size changes.