Designing Page Transitions
summary
Shows how to use the new view transitions React component to opt into browser transitions (demo built with Nex.js and XJS), starting from the default crossfade and adding CSS keyframes for horizontal motion, a custom link that calls addTransitionType to flip direction, and nested shared element transitions to freeze unchanged headers. DevTools reveal the browser creates temporary pseudo-element “photos” of old and new pages so animations run on static images, making the approach practical and performant within a 10-minute Nex.js demo.
AI-written summary · about
chapters (8)
- 0:00Introduction to motion
- 1:36The view transitions API
- 2:36Implementing simple fades
- 3:15Adding horizontal motion
- 4:30Customizing transition direction
- 5:32Shared element transitions
- 6:39Refining motion for UX
- 8:06How view transitions work
related talks
32mSupercharge Web UX with View Transitions!
11mNo More Flash Cuts: Animating Between Pages
10mView Transitions: The brand-new browser API that will blow your mind
21mCSS Between the Pages
33mMaking A Splash With View Transitions
49mSupercharge Web UX with View Transitions
04mIntuitive Web Experiences with the View Transitions API
19mView Transitions: Fact vs. Fiction