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.
2import Barba from '@barba/core';
3Barba.init({
4 transitions: [{
5 name: 'fade',
6 leave({ current }) { … },
7 enter({ next }) { … }
8 }]
9});
2document.startViewTransition(() => {
3 document.body.innerHTML = newContent;
4});
5
6.hero { view-transition-name: hero; }
7/* Optional: ::view-transition-old/new(hero) */
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().