Supercharge Web UX with View Transitions
summary
Claims that the View Transitions API turns jarring page loads into seamless animations and shows the view-transitions-toolkit npm package used to pause, scrub and optimize animations. Demos include a working scroll-driven transition (after several dead ends), fixes for jank by rewriting width/height into transforms, and an element-scoped view transitions mode to avoid document locking; many hacks and a JS mock exist but native browser support performs best.
AI-written summary · about
chapters (18)
- 0:00View transitions intro
- 1:08Maximizing view transitions
- 3:38View transitions enhance UX
- 9:28Behind the scenes of view transitions
- 13:21Real examples of transitions
- 14:47Scroll-driven transitions
- 21:06Draggable transitions
- 27:44Drag to scroll transitions
- 30:17View Transitions Toolkit
- 32:01Optimizing transition performance
- 36:19Element transitions in Chrome 147
- 37:40Animating elements not pixels
- 39:45Handling interrupted transitions
- 42:53Smoothing interrupted transitions
- 43:56Preventing snapshot bleed
- 45:18Polyfilling view transitions
- 47:02IE page transitions nostalgia
- 48:45Closing thoughts
related talks
32mSupercharge Web UX with View Transitions!
04mIntuitive Web Experiences with the View Transitions API
10mView Transitions: The brand-new browser API that will blow your mind
46mThe viewTransition API: A Revolution for the Web?
33mMaking A Splash With View Transitions
27mAnimate All the Things! (With View Transitions API)
01h 04mLiven up your websites with Scroll-Driven Animations & View Transitions
22mFLIP no more; Viva View Transitions