Smooth Page Transitions with the View Transitions API

The View Transitions API lets the browser animate between two states of your UI without you hand-writing FLIP animations.

Same-document transitions

Wrap the DOM update in document.startViewTransition:

function showDetails(item) { if (!document.startViewTransition) return render(item); // fallback document.startViewTransition(() => render(item)); } 

The browser snapshots the old state, runs your update, then cross-fades to the new state by default.

Animate specific elements

Give matching elements the same view-transition-name and they morph between positions:

.card-image { view-transition-name: hero; } ::view-transition-old(hero), ::view-transition-new(hero) { animation-duration: 300ms; } 

Each name must be unique on the page at the moment of the transition.

Cross-document (multi-page) transitions

For classic multi-page sites, opt in on both pages:

@view-transition { navigation: auto; } 

Tips

• Respect users who prefer less motion with a prefers-reduced-motion media query.
• Keep transitions short (200-400 ms) so navigation never feels slower.
• Always keep the non-animated fallback path working.

Progressive enhancement at its best: browsers without support just update instantly.