withastro/astro · info

[transitions]: all view transition animations, including fal

Error message

[transitions]: all view transition animations, including fallback animation, are disabled as this device has the prefer-reduced-motion setting enabled.

What it means

On load, Astro's ClientRouter (View Transitions) checks `window.matchMedia('(prefers-reduced-motion)').matches`; in dev (`import.meta.env.DEV`) it console.warns that all view transition animations — including the fallback animation for browsers without native view transitions — are disabled (packages/astro/components/ClientRouter.astro:58). This is by design: honoring the user's OS-level reduced-motion setting is an accessibility requirement, and ClientRouter suppresses animated transitions entirely for those users, falling back to instant navigation. The warn exists only so developers testing in dev don't mistake the missing animation for a bug.

Source

Thrown at packages/astro/components/ClientRouter.astro:58

			return el.getAttribute('content') as Fallback;
		}
		return 'animate';
	}

	function isReloadEl(el: HTMLElement | SVGAElement): boolean {
		return el.dataset.astroReload !== undefined;
	}

	const leavesWindow = (ev: MouseEvent) =>
		(ev.button && ev.button !== 0) || // left clicks only
		ev.metaKey || // new tab (mac)
		ev.ctrlKey || // new tab (windows)
		ev.altKey || // download
		ev.shiftKey; // new window

	if (supportsViewTransitions || getFallback() !== 'none') {
		if (import.meta.env.DEV && window.matchMedia('(prefers-reduced-motion)').matches) {
			console.warn(
				`[transitions]: all view transition animations, including fallback animation, are disabled as this device has the prefer-reduced-motion setting enabled.`,
			);
		}
		document.addEventListener('click', (ev) => {
			let link = ev.target;

			lastClickedElementLeavingWindow = leavesWindow(ev) ? link : null;

			if (ev.composed) {
				link = ev.composedPath()[0];
			}
			if (link instanceof Element) {
				link = link.closest('a, area');
			}
			if (
				!(link instanceof HTMLAnchorElement) &&
				!(link instanceof SVGAElement) &&
				!(link instanceof HTMLAreaElement)

View on GitHub (pinned to 52e6c34790)

Solutions

1. No code fix is needed — this is expected, correct behavior; do not attempt to override the user's reduced-motion preference.
2. To test animations locally, disable the OS reduced-motion setting (macOS: System Settings → Accessibility → Display → uncheck 'Reduce motion') or in Chrome DevTools → Rendering → Emulate CSS media feature prefers-reduced-motion: no-preference.
3. If you build custom per-transition animations, gate them on the same media query (`@media (prefers-reduced-motion: no-preference)`) so your own effects respect the setting like ClientRouter does.

Example fix

/* before: custom transition ignores user preference */
::view-transition-old(root) { animation: slide-out 300ms; }

/* after: honor reduced motion like ClientRouter does */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: slide-out 300ms; }
}

// mirror ClientRouter's own check before relying on animated transitions
const prefersReducedMotion =
  typeof window !== 'undefined' &&
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (prefersReducedMotion) {
  // skip/short-circuit any custom transition orchestration
}

When it happens

Trigger: Running `astro dev` on a machine where the OS 'reduce motion' accessibility setting is enabled (macOS: System Settings → Accessibility → Display → Reduce motion; Windows: Ease of Access → Show animations off; iOS/Android equivalents), then loading any page that includes `<ClientRouter />`. It only warns in dev; production builds never log it, and in both dev and prod the animations are actually disabled for that user.

Common situations: A developer with reduced motion enabled at the OS level (common for accessibility reasons or vestibular disorders) wonders why view transitions and fallback animations never play in dev; headless/browser-automation environments where the prefers-reduced-motion media feature is emulated as 'reduce' (Playwright/Puppeteer default emulation or a leaked DevTools setting); testing on a device with battery-saver-driven motion reduction.

Related errors

• Unexpected template-exit instruction without a matching temp
• Invalid transition name {${transitionName}}
• ImageMissingAlt
• ImageMissingAlt
• The view transitions client API was called during a server s

AI-assisted analysis of withastro/astro@52e6c34790 (2026-08-18). Data as JSON: /api/errors/10d04ea9a974b582. Report an issue: GitHub.