# Add a page transition as a progressive enhancement

Treat a page or view transition as an optional enhancement around a working update. The user should reach the same content when the API is unavailable or reduced motion is active. Keep navigation, focus, and browser history correct before adding a visual transition.

## Feature-detect rather than assume support
```js
function updateView(update) {
  const reduced = window.matchMedia(
    '(prefers-reduced-motion: reduce)'
  ).matches;
  if (reduced || !document.startViewTransition) {
    update();
    return;
  }
  return document.startViewTransition(update);
}
```

This browser-only example wraps a synchronous DOM update. Framework updates may need their own integration to ensure the callback commits the new view at the right time. Check the current MDN documentation and your framework’s supported approach rather than copying this fragment into routing code blindly.

## Keep the fallback styles complete
```css
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}
```

Normal layout and content must exist independently of the snapshots. Do not use an animation to reveal text that would otherwise stay hidden.

## Separate visual continuity from navigation
A transition between two filters on one page has different history and focus needs from navigating to a new route. A visual snapshot does not update the document title, establish a canonical URL, or move focus appropriately. Handle those concerns through your actual application behavior.

| Check | Expected result |
| --- | --- |
| Unsupported API | Ordinary update succeeds |
| Reduced motion | Immediate content change |
| Back button | Previous state or route restored correctly |
| Keyboard use | Focus remains understandable |
| Rapid update | Latest state wins |

## Test without the enhancement
Disable the API path and repeat the task. If the interaction fails, the transition has become a dependency. Fix that before refining the effect. Avoid promising universal browser behavior; support changes, and the feature should remain optional even when widely available.

---
SkillStall · 2026-10-02
MDN: prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
MDN: Document.startViewTransition(): https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition