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
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.
Replaces Manual Position-Snap Animations
- View transitions replace complex manual animation workflows like measuring positions and transforming elements.
- They automatically handle list reorders, removals, and shuffles that were previously hard to implement.
Using View Transitions For Presentation Slides
- Caleb used view transitions to recreate Keynote's Magic Move effect inside browser slides for a Laracon talk.
- He built slides as normal Livewire components and animated transitions between them to great effect.