Honor reduced motion

React won't turn view transitions off for you. Add the CSS once.

React docsreact.dev
Many users may prefer not having animations on the page. React doesn't automatically disable animations for this case.
Always check prefers-reduced-motionRead docs ↗

From vercel-react-view-transitions, css-recipes.md.

Same carousel, one preference

Tick reduced motion, then step through.

No media queryBad
slides at any setting
Media queryGood
movement off, fade kept
/* The skill's recipe: every duration to zero */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-group(*) {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}

/* Gentler: drop movement, keep the fade */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s !important; }
  ::view-transition-old(*) { animation: 150ms ease both fade reverse !important; }
  ::view-transition-new(*) { animation: 210ms ease both fade !important; }
}

Why it matters, pros and cons

Why it matters

Directional slides move whole views across the screen, the most common trigger for motion sickness. React leaves the preference to your CSS.

Pros

  • One global block covers every boundary.
  • Content still swaps; only movement goes.
  • A kept fade still says "this changed".

Cons

  • !important is needed to beat per-class rules.
  • Keeping fades means checking each recipe.
  • JS onEnter animations need their own check.