Remember when smooth page transitions required React, Vue, or complex JavaScript libraries? The View Transitions API changes everything. Native, smooth transitions between pages—or even DOM states—with minimal code.

How It Works

The API captures a "before" snapshot of the page, you make your changes, then it captures an "after" snapshot. The browser animates between them automatically.

Cross-Document Transitions

For multi-page applications like this blog, we can enable transitions between different HTML pages. Just add a CSS rule:

That's it. The browser will now animate between pages during navigation. But we can customize it further.

Named Transitions

By giving elements a view-transition-name, we can create element-specific animations. The browser will morph matching elements between states.

Custom Animations

The default crossfade is nice, but we can customize the animations using the ::view-transition-old and ::view-transition-new pseudo-elements.

JavaScript Control

For SPA-like navigation on multi-page sites, we can intercept links and use startViewTransition with fetch:

Try It Now

Click any link on this blog—the navigation between pages uses the View Transitions API. Watch how the content smoothly fades and slides. No framework required.

The web platform continues to absorb the best ideas from JavaScript frameworks and make them native. View Transitions is just the latest example of this trend, and I'm here for it.

Further Reading