---
title: 'Silky Smooth Navigation with the View Transitions API'
description: 'Implementing seamless, native app-like page transitions on the web without heavyweight libraries.'
subtitle: 'Cross-document and same-document view transitions explored.'
date: '2024-08-30'
lang: 'en'
---

The View Transitions API is arguably the most impactful enhancement to web animation in a decade.

## The Basic Workflow

```javascript
if (!document.startViewTransition) {
  updateDOM()
  return
}

document.startViewTransition(() => {
  updateDOM()
})
```

The browser automatically captures snapshots of the previous state, prepares the incoming state, and blends them using customizable CSS keyframes:

```css
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}
```