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…
The View Transitions API enables web browsers to smoothly animate between two states of a user interface without the need for manual FLIP animations. To implement same-document transitions, you can wrap a DOM update within document.startViewTransition() function. For example:
if (!document.startViewTransition) return render(item);
document.startViewTransition(() => render(item));
If the browser doesn't support the API, it will fall back to a regular update. To animate specific elements, they must share the same view-transition-name. For instance:
.card-image {
view-transition-name: hero;
}
::view-transition-old(hero), ::view-transition-new(hero) {
animation-duration: 300ms;
}
Each unique name must be present on the page during the transition. Cross-document transitions, or multi-page transitions, require opting in on both pages using the @view-transition rule:
@view-transition {
navigation: auto;
}
It's important to consider users who prefer less motion by using a prefers-reduced-motion media query. Additionally, keeping transitions short (between 200-400 milliseconds) helps maintain a feeling of quick navigation. Always ensure there's a non-animated fallback path in place to prevent slower navigation on unsupported browsers. The View Transitions API represents a progressive enhancement approach, providing enhanced user experience where supported while maintaining functionality in older browsers.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
