Skip to content

View Transitions API

Key idea:

View Transitions API — native JS API for smooth animations between DOM states. document.startViewTransition() snapshots the old state → applies changes → animates the transition via CSS. Chrome 111+ (same-document), 126+ (cross-document). Framework-agnostic, with React Router and Next.js integrations already available.

Below: details, example, related terms, FAQ.

Try it now — free →

Details

  • Same-document: SPA-like transitions without reloading the page
  • Cross-document: transitions between MPA pages (Chrome 126+)
  • CSS: ::view-transition-old(*) / ::view-transition-new(*)
  • Customise: view-transition-name per element
  • Fallback: no support — instant transition without animation

Example

// Plain JS — SPA page switch
function navigate(url) {
  if (!document.startViewTransition) return render(url);
  document.startViewTransition(() => render(url));
}

// CSS custom animation
@keyframes fade-in { from { opacity: 0; } }
::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

Related Terms

How to Implement View Transitions API in Your Web Application

Common Use Cases for the View Transitions API

Integrating View Transitions API with Popular Frameworks

Learn more

Frequently Asked Questions

Framer Motion replacement?

For simple page transitions — yes. For complex interactive animations (drag, spring physics) — Framer Motion / GSAP are better.

Safari support?

Technology Preview 208 (2025) has same-document. Production Safari — not yet. Firefox — also WIP.

SEO impact?

Same-document: no impact (SPA routing). Cross-document: native navigation, crawlers see regular navigation.

Try the live tool that powered this guide

Free plan — 20 monitors, 5-minute checks, no card required. Upgrade for 1-minute interval and multi-region monitoring.