Skip to content

No. 04

View Transitions: A Field Guide

You're already inside a View Transition: every navigation on this site is one. Here's the API behind it, the variants, and the traps, with a live lab to poke at.

Case study by Eega Somasekhara Reddy ·

  • View Transitions
  • CSS
  • React
  • Web APIs
Role
Design + Dev
Team
Solo
Timeframe
2026
Problem
The View Transitions API demos well and breaks in ways the spec summary does not warn you about.
Decision
Write it as a field guide: five variants, the traps beside each one, and a live lab pairing a contained preview with the real API code.
Outcome
In progress. Every navigation on this site already runs on the API the guide describes.
View Transitions lab: cross-fade, clip reveal, and slide variants cycling on hover
01

You're Already In One

Every time you move between sections of this site, or open a case study, the browser isn't just swapping pages. It's running a View Transition. The slide, the circle reveal, the card that morphs into this page: all the same API.

This is a field guide, not a war story: what I learned wiring up this site, distilled into the variants and gotchas, with a live lab. The previews below are simulated (plain CSS/JS) so they stay contained; the real API code sits beside each one.
02

The Lab

Pick a variant, hit Run, and watch it play. Each tab pairs a simulated preview with the real View Transitions code that produces it.

Simulated preview
Page A
Page B
implementation.tsxpreview

The default. With no view-transition-name on anything, the browser snapshots the whole page as one image (root) and cross-fades old → new. Free: you get it just by wrapping the DOM change.

// the entire default transition
document.startViewTransition(() => {
  // swap the DOM however you like
  renderNewView();
});