Smooth DOM Transitions in SPAs Using the View Transitions API

Ramin

June 2, 2025

Reading Time 2 Minute(s)

Learn how to create native, animated transitions between UI states in your single-page applications using the View Transitions API. This post walks through the basics, provides a practical example, and links to official documentation to help you get started quickly.

Modern web apps often rely on client-side routing to create fast, responsive experiences. However, one challenge remains: ensuring smooth visual transitions between pages or views without relying on heavy libraries or frameworks.

With the View Transitions API, now supported in Chromium-based browsers, you can animate DOM changes natively — offering sleek visual feedback with minimal code.

✨ What is the View Transitions API?

The View Transitions API enables animated transitions between different DOM states. Whether you're navigating between routes or toggling views in a single-page application (SPA), this API lets you animate the shift between “before” and “after” states.

✅ Unlike traditional CSS transitions, this API handles DOM updates and animations together in a well-defined sequence.

🧠 When to Use It

The API is especially useful for:

Navigating between routes in SPAs
Showing/hiding sections or modals
Tab-based navigation
Complex layout state changes

For multi-page apps, the browser automatically captures the before/after snapshots. But for same-document navigation (e.g., SPAs), you manually define the DOM update within the transition.

🔧 Basic Implementation Example

Let’s build a minimal example with two views: Home and About.

<!DOCTYPE html>
<html>
<head>
  <title>View Transitions Example</title>
  <style>
    main {
      view-transition-name: main;
    }

    ::view-transition-old(main),
    ::view-transition-new(main) {
      animation-duration: 0.4s;
      animation-timing-function: ease;
    }

    ::view-transition-old(main) {
      animation-name: fade-out;
    }

    ::view-transition-new(main) {
      animation-name: fade-in;
    }

    @keyframes fade-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fade-out {
      from { opacity: 1; }
      to { opacity: 0; }
    }

    nav {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <nav>
    <button onclick="navigate('home')">Home</button>
    <button onclick="navigate('about')">About</button>
  </nav>

  <main id="content">Welcome to the homepage.</main>

  <script>
    const pages = {
      home: 'Welcome to the homepage.',
      about: 'This is the about page.'
    };

    function navigate(page) {
      const content = document.getElementById('content');

      if (!document.startViewTransition) {
        content.textContent = pages[page];
        return;
      }

      document.startViewTransition(() => {
        content.textContent = pages[page];
      });
    }
  </script>
</body>
</html>

📦 How It Works

We assign a view-transition-name to the main element.
We define animations using @keyframes for both the old and new views.
On button click, we call document.startViewTransition() and update the DOM inside it.
The browser handles the transition between the two visual states smoothly.

⚠️ Browser Support

This feature currently works in Chromium-based browsers like Chrome and Edge. For unsupported browsers, the fallback logic ensures the content is still updated — just without animation.

You can check for support like this:

if ('startViewTransition' in document) {
  // Safe to use the API
}

🔗 References

📘 View Transitions API Overview
📘 Same-Document Transitions Guide

If you're building a modern SPA and want to add native-feeling polish with minimal effort, the View Transitions API is a fantastic tool to explore. Try it in your next project and let your UI breathe with smooth transitions!

CSS SPA

Back to list

June 2, 2025