Transition opt-out

Compare navigating with and without the View Transitions API animation. Both buttons go to the same page — only the second passes { transition: false }.

The API

// Default — animated slide + cross-fade
navigate('/showcase')

// Opt out — instant swap, no animation
navigate('/showcase', { transition: false })

When to skip the animation

The default cross-fade is a good fit for most page navigations, but there are times when an instant swap is better:

• Settings changes — toggling a preference and navigating to see the result shouldn't animate; the user wants immediate visual confirmation.
• Filter or sort updates — when only a data grid changes and the surrounding chrome stays put, a slide animation is disorienting.
• Expensive content swaps — if the destination page paints a heavy canvas or iframe, the transition captures an intermediate state that looks broken.
• Accessibility — users who enable prefers-reduced-motion: reduce in their OS have all animations suppressed globally via CSS. The per-nav opt-out is for programmatic cases where the author knows animation doesn't help.

Respecting reduced motion

The docs site ships a @media (prefers-reduced-motion: reduce) block that disables all view-transition animations via animation: none !important. Users with motion sensitivity get instant navigations site-wide — no configuration, no toggle.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(header),
  ::view-transition-new(header),
  ::view-transition-old(nav),
  ::view-transition-new(nav) {
    animation: none !important;
  }
}

← Back to Showcase