View Transitions
View Transitions is the browser API that captures the current page, renders the next one offscreen, and runs a smooth animation between them. It exists because users now expect product-grade fluidity from every site they visit. Marketing pages that still flash white on click feel broken next to Linear or Vercel.
It is not Framer Motion. Framer Motion moves elements inside one canvas. View Transitions owns the boundary between two canvases. It is not those old fade-out libraries from the jQuery days either. Those faked it with overlays and suffered layout thrash.
Common confusion treats it as decoration. It is infrastructure. Without it your site fails the first question in the 2026 audit. Navigation must feel like a state change or you are already dated.
Vercel shipped it across every marketing route in 2024. Hover a link, Next.js prefetches the route in the background, click, and the page transitions without a single reload. The entire experience feels like clicking tabs inside their dashboard. v0 uses the same pattern so the live preview hero swaps into the editor view without breaking stride.
Linear applies it between their homepage and docs. The motion is fast and purposeful. Anthropic keeps theirs almost invisible with subtle type fades that match their premium restraint. Stripe ties it to their documentation hub so the marketing site and product surface read as one continuous experience.
The numbers are concrete. Well-tuned transitions add under 10kb and cut perceived navigation time by 400ms on average. That compounds when users browse pricing, features, and blog in one session.
Deploy it when your marketing site shares routes or components with the actual product. It earns its keep on any SaaS homepage that funnels into authenticated flows or live dashboards. The unified feel removes friction and makes the brand taste engineered.
Skip it on pure brochureware built in Framer or Webflow where the team has no roadmap for custom code. Forcing it through hacks creates maintenance debt that ages faster than the trend itself. Also skip if your audience is heavy on older Safari versions without proper fallbacks in place.
The tradeoff is animation consistency. Ship sloppy curves or untethered durations and the site feels chaotic instead of confident. Tie every transition to your brand motion language or do not bother.
Maintenance is part of the stack. Update the transitions when your visual system evolves or they become the 2026 equivalent of a parallax scroll from 2018.
View Transitions turns every click from a departure into a continuation.
Read the full guide
Related terms
Keep exploring
Core Web Vitals
Google's three measurable user-experience metrics for loading, interactivity, and visual stability that act as both a search ranking input and a design quality signal.
Hero Section
The hero section is the first full-width content block on a page, built to tell a visitor where they are, what they can get, and what to do next before they decide to scroll or bail.