- Scene
- 11
- Take
- 01
- Level
- Intermediate
- Runtime
- ~2 h
View Transitions
Let the browser photograph the page before and after a change and animate between the two photos: snapshots, shared names, pseudo-elements, cross-page transitions, failures and fallbacks.
A view transition lets the browser animate between two states of a page without you keeping both in the DOM. It photographs the old page, lets you change the DOM, photographs the new page and animates between the pictures. Elements you name are paired up and morph from their old position and size to their new ones.
This phase teaches the model first (snapshots, the pseudo-element tree, the three promises), then names, types and styling, then the same idea across two real pages, and what happens when it fails, is skipped, too slow or unsupported.
You build the product-to-ride-page transition on the Lumen site: the Volt drawing flies into the ride page, the ride page's tabs slide the way you move, and it stays calm for visitors who ask for less motion.
▶ Roll: 11.1Scene 11 · the brief from Lumen
Mei, motion designer at Lumen Bikes
“When someone taps 'See the ride', the Volt should not vanish and reappear. It should travel to its new place, so the eye keeps hold of it.”
Mei's storyboard has one frame Kofi keeps coming back to: the Volt drawing on the launch page, and the same drawing, bigger, on the ride page. Between them the page reloads and the screen flashes white. Mei draws an arrow between the drawings and writes "it travels".
Once that arrow meant a single-page app and hand-written animation. Now both pages can name "the Volt" and the browser moves one into the other. Kofi worries about an older browser, a slow ride page, and what Ravi sees.
By the end of this phase the Volt travels between pages, the tabs slide the right way, a visitor on reduced motion gets a short fade, and every failure mode has been tried on purpose.
In this scene
You will learn
- Explain what a view transition photographs, when your code runs and what the browser animates
- Name elements so they morph, and style the pseudo-elements to change how
- Run a transition across two documents, and say what it needs and when the browser gives up
- Handle skips, errors, slow updates, unsupported browsers and reduced motion
You write code in
In your lumen-motion project (npm run dev) and in the editor on this page. Cross-page transitions need two real pages, so they are shown as captured runs; the same-page ones run live
Files you touch
- index.html
- ride.html
- src/js/components/transitions.js
- src/js/main.js
- src/styles/components.css
- vite.config.js
Shot list · 7 shots, widths by reading time
- 11.1The Snapshot Model
document.startViewTransition(update)photographs the page, runs your update while the screen shows the photograph, photographs the result, then animates between the two pictures. The default is a 250 ms cross-fade of the whole page. 17 min 2 live - 11.2Naming Elements and MorphingGive an element a
view-transition-nameand the browser snapshots it separately and moves it from its old box to its new one. Names must be unique at the moment of capture, or the whole transition is skipped. 18 min 2 live - 11.3Styling the Pseudo-ElementsThe browser builds a tree of pseudo-elements you can style like any element: change the group's timing, replace the old and new pictures' animations, and use transition types to choose a different animation for each direction. 18 min 2 live
- 11.4Cross-Document TransitionsAdd
@view-transition { navigation: auto; }to two same-origin pages and the browser animates the navigation between them, with named elements morphing across.pageswapandpagereveallet you adjust or skip it, and a slow new page cancels it. 18 min 1 live - 11.5Skips, Errors and FallbacksA transition can be skipped by you, replaced by a newer one, rejected by a throwing update, abandoned for a duplicate name or a slow update, or never offered at all. Each case settles the three promises differently, and the DOM change must happen in all of them. 19 min 3 live
- 11.6View Transitions in ReactReact's own
<ViewTransition>component is not in the stable React 19.2.8. What works today isdocument.startViewTransitionwithflushSyncinside the callback, so React has rendered before the browser takes the new snapshot. 17 min 1 live - 11.7Build: The Product to Ride-Page TransitionbuildYou add a ride page, opt both pages in to cross-document transitions so the Volt drawing flies from the launch page to the ride page, slide the ride page's tabs with a same-document transition, and keep all of it calm for reduced motion and safe for browsers without support. 23 min 1 live
Dailies · 4 checked exercises
A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.
document.startViewTransition so the page cross-fades.BeginnerD02Make the card travelThe card jumps between two boxes with a cross-fade. Give it a view-transition-name of volt so it moves from one box to the other.IntermediateD03Slide the way you are goingThe panel always leaves to the left. Make Next leave to the left and Back to the right, using a transition type and one pair of keyframes.IntermediateD04Keep the change, drop the transitionwithTransition already handles a missing API. Add the second guard: when the visitor prefers reduced motion (prefers-reduced-motion: reduce), run the update directly with no transition.Advanced