Page transitions without a framework
Page transitions used to need Barba.js or React Transition Group. The View Transitions API gives you cross-fades and shared-element motion with one JS call and CSS.
2document.startViewTransition(() => {
3 document.body.innerHTML = newContent;
4});
5
6.hero { view-transition-name: hero; }
7/* Optional: ::view-transition-old/new(hero) */
2import Barba from '@barba/core';
3Barba.init({
4 transitions: [{
5 name: 'fade',
6 leave({ current }) { … },
7 enter({ next }) { … }
8 }]
9});
Browser Support for View Transitions API
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Your first month is free
Managed WordPress hosting for faster sites.
One API
Wrap your DOM update in startViewTransition. Browser handles capture, transition, and paint.
Shared elements
view-transition-name links old and new elements. Morph between them with CSS.
Framework-agnostic
Works with vanilla JS, React, or any stack. No router lock-in.
How it works
Smooth page-to-page or view-to-view transitions usually meant a library that ran leave animations, swapped content, then ran enter animations. You managed state and timing yourself.
document.startViewTransition(callback) runs your callback (e.g. update the DOM), and the browser captures the before state, applies the update, captures the after state, then animates between them. Use view-transition-name on elements that should match across views for shared-element effects. Style with ::view-transition-old() and ::view-transition-new().