When a Waypoint visitor ticks “Hide sold-out”, three cards vanish and the rest jump upwards to fill the gaps. It’s instant and correct, and it’s disorienting: your eye was on the fourth card, and now something else is there. A smooth movement from the old layout to the new one would tell the eye where things went.
\nAnimating layout changes used to mean measuring every element before and after and running FLIP animations in JavaScript. The View Transition API does the measuring for you.
\nconst button = document.querySelector('#hide-full');\n\nfunction applyFilter() {\n const hide = button.getAttribute('aria-pressed') !== 'true';\n button.setAttribute('aria-pressed', String(hide));\n for (const card of document.querySelectorAll('.session-card.is-full')) {\n card.hidden = hide;\n }\n}\n\nbutton.addEventListener('click', () => {\n if (!document.startViewTransition) {\n applyFilter(); // older browsers: just update\n return;\n }\n document.startViewTransition(() => applyFilter());\n});startViewTransition() does four things in order:
The default animation is a crossfade of the whole page. It’s subtle, and already better than a jump. The DOM update itself is real and immediate; only the picture animates, and while it plays, the page underneath is already in its new state. If the update throws or the transition is skipped, the DOM change still happens.
\nTo make each card glide to its new position, give it a view-transition-name. Every named element gets its own snapshot pair, and the browser animates its position and size from old to new:
.session-card {\n view-transition-name: var(--vt-name);\n}// Give every card a unique name once, when the list renders\nfor (const card of document.querySelectorAll('.session-card')) {\n card.style.setProperty('--vt-name', `card-${card.id}`);\n}Names must be unique among the elements rendered at the moment of capture. The cards that disappear fade out (they exist only in the old snapshot), and the cards that remain slide up into the gaps. Your eye follows them.
\n\nThe animation lives in a tree of pseudo-elements: ::view-transition at the top, a ::view-transition-group(name) per named element (plus root for the rest of the page), and inside each, ::view-transition-old(name) and ::view-transition-new(name). They’re animated with ordinary CSS animations, so you control them with ordinary CSS:
::view-transition-group(*) {\n animation-duration: 250ms;\n animation-timing-function: ease-out;\n}\n\n/* Keep the header still while the list moves */\n.site-header { view-transition-name: header; }\n::view-transition-group(header) { animation: none; }The * matches every group. For reduced motion, remove the animations so the change is instant:
@media (prefers-reduced-motion: reduce) {\n ::view-transition-group(*),\n ::view-transition-old(*),\n ::view-transition-new(*) {\n animation: none !important;\n }\n}The !important isn’t there to beat the browser’s default animations; your normal rules already win over those, as you saw in the first lesson. It’s there so the user’s preference also beats any more specific animation you or a library wrote for one named group, such as ::view-transition-group(header).
You can also target one direction of change. The old snapshot of a card that disappears only has a ::view-transition-old(card-s2), with no new counterpart, so a rule like ::view-transition-old(*) { animation-duration: 150ms; } makes leaving cards fade a little faster than the remaining ones move. Small differences like that make a list feel organised rather than shuffled.
startViewTransition() returns a ViewTransition object with three promises. updateCallbackDone resolves when your DOM update has run, ready when the animation is about to start, and finished when it has ended and the pseudo-elements are gone. Use finished to move focus or announce a result after the motion settles, for example sending focus to the first remaining card for keyboard users. Don’t make anything essential wait on the animation, though: in a browser without the API, there’s no transition object at all.
The exercise’s filter button hides sold-out sessions with no animation. Give each card a unique name, wrap the update in a view transition with a fallback, set the group duration to 250ms, and switch the animation off for reduced motion. The checks spy on startViewTransition and also remove it to make sure your fallback works. Next, you’ll tie animation progress to scrolling instead of time.
document.startViewTransition(update) snapshots the page, runs your DOM update, snapshots again and animates between the two with a crossfade by default.","An element with a unique view-transition-name gets its own snapshot pair, so it moves and resizes smoothly to its new position instead of fading.","The animation is built from pseudo-elements such as ::view-transition-group(name), which you style with ordinary CSS animations.","Always feature-detect startViewTransition and run the update directly when it’s missing, and remove the animation for users who prefer reduced motion."],"further":[{"title":"View Transition API (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API"},{"title":"Document: startViewTransition() method (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition"},{"title":"Same-document view transitions have become Baseline Newly available (web.dev)","url":"https://web.dev/blog/same-document-view-transitions-are-now-baseline-newly-available"}],"quiz":[{"q":"You call document.startViewTransition(() => applyFilter()) with no CSS at all. What does the user see?
view-transition-name before they animate.","why":"Without names, the whole page is captured as root and still animates."},{"text":"The filter applies instantly, because the default animation duration is zero.","why":"The default is a short crossfade, not an instant change."},{"text":"A quick crossfade of the whole page from the old state to the new one.","why":"Correct. The root snapshot pair crossfades by default; names add per-element movement on top."}],"answer":2},{"q":"Two cards on the page both have view-transition-name: card. What happens when you start a transition?
How do you make every view transition on the page take 250ms?
","options":[{"text":"document.startViewTransition({ duration: 250 })","why":"The method takes an update callback (or an options object with update and types), not a duration."},{"text":"::view-transition-group(*) { animation-duration: 250ms; }","why":"Correct. The groups run CSS animations, so ordinary animation properties control their timing."},{"text":"view-transition-duration: 250ms on :root","why":"There’s no such property; timing comes from the animations on the pseudo-elements."}],"answer":1},{"q":"Which statement about support is accurate in 2026?
","options":[{"text":"Same-document and cross-document view transitions both work in every major browser.","why":"Cross-document view transitions for multi-page apps aren’t available in Firefox yet, so they’re not Baseline."},{"text":"View transitions only work in Chromium browsers.","why":"Safari and Firefox both support same-document view transitions now."},{"text":"View transitions require a framework router to work.","why":"They’re a browser API; any DOM update inside the callback works, with or without a framework."},{"text":"Same-document view transitions are Baseline since October 2025; cross-document ones aren’t Baseline yet.","why":"Correct. Firefox 144 completed same-document support; MPA (cross-document) transitions still lack Firefox support."}],"answer":3}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"\nClicking Hide sold-out hides two cards instantly. Make the change animate:
\n.session-card a unique view-transition-name (in CSS, in JS, or both).document.startViewTransition(), and fall back to a plain update when the method doesn’t exist.::view-transition-group animation last 250ms.The checks spy on document.startViewTransition and also delete it to test your fallback.
view-transition-name: var(--vt-name);. Set --vt-name per card from its id in JS.","In the click handler: if (!document.startViewTransition) { applyFilter(); return; } then document.startViewTransition(() => applyFilter());.","::view-transition-group(*) { animation-duration: 250ms; }, and inside @media (prefers-reduced-motion: reduce) set animation: none !important on the group, old and new pseudo-elements."],"explanation":"Each card now has a unique name (card-s1, card-s2…), so the browser pairs its old and new snapshots and slides the remaining cards into the gaps while the hidden ones fade out. A shared name would make the browser skip the transition. Wrapping applyFilter() in startViewTransition() gives the browser its before and after states; the feature check keeps the button working in browsers without the API. The group animations are normal CSS animations, so animation-duration sets their timing and animation: none inside the reduced-motion query turns them into an instant change.