View Transitions: the smoothest thing the web shipped this year.

The View Transitions API hit broad browser support this year. It is the closest the web has ever felt to a native app — and the surprising part is how easy it is to wire up. Two CSS properties and one JS call replace what used to take Framer Motion, AnimatePresence, or hand-rolled FLIP libraries.

What it does

• 01Animates the transition between two states of the DOM, including across page navigations.
• 02Lets you tag elements as 'transition partners' so they morph from one page to the next.
• 03Browser handles the snapshot, the interpolation, and the cleanup — you write CSS animations and view-transition-name rules.
• 04Same-document (SPA) and cross-document (MPA) navigations are both supported.
• 05Respects prefers-reduced-motion automatically.

Browser support

A complete example, in plain HTML / CSS / JS

<a href="/photo/42" class="card" id="card-42">
  <img src="/img/42-thumb.jpg" class="card__image" />
  <h3 class="card__title">Sunset on the Ridge</h3>
</a>

/* Tag the elements that should morph between pages */
.card__image {
  view-transition-name: photo-42-image;
}
.card__title {
  view-transition-name: photo-42-title;
}

/* Customise the animation if you want non-default behaviour */
::view-transition-old(photo-42-image),
::view-transition-new(photo-42-image) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

// Same-document SPA navigation
async function navigateTo(url: string) {
  if (!document.startViewTransition) {
    // Fallback for unsupported browsers — just navigate
    location.href = url
    return
  }
  const transition = document.startViewTransition(async () => {
    await renderNewPage(url)
  })
  // Optionally wait for the animation to finish
  await transition.finished
}

Where it's already paying off

• 01Listing → detail page transitions where the card expands into the hero. Used to need React + Framer Motion plus state mirroring; now it's a class name.
• 02Tabbed views that fade and shift without a full re-render.
• 03Modal opens that feel anchored to the element that triggered them.
• 04Image galleries — the thumbnail morphs into the lightbox view.
• 05Cross-page navigation on multi-page sites — the entire MPA suddenly feels like an SPA.

"

It's the rare web feature that genuinely improved the platform without anyone needing a library to use it. Two CSS properties and a single browser API call replace a category of JavaScript dependency.

What to watch for

• 01Same-document transitions are stable everywhere except Firefox; cross-document ones are still rolling out — feature-detect with if (document.startViewTransition).
• 02Reduced-motion users get unstyled transitions by default. Respect prefers-reduced-motion explicitly if your transitions are highly motion-driven.
• 03Don't animate every transition just because you can. Restraint is still the point.
• 04view-transition-name values must be unique per page. Listing pages with 20 cards need 20 unique names — use the item ID.
• 05Performance-sensitive transitions (many large elements) still benefit from will-change hints and minimal reflow.

What this replaces

• 01Framer Motion AnimatePresence + layoutId patterns for shared element transitions.
• 02Hand-rolled FLIP (First, Last, Invert, Play) libraries.
• 03Some uses of GSAP Flip.
• 04Animation libraries shipped purely to handle page transitions.

We're now using View Transitions on every Nuxt project where the design calls for it. The amount of code it replaces is striking. It's a platform-level capability that finally caught up to what the design world has been asking for since the iPhone shipped its first ZUI animation in 2007.