View Transitions API

• Same-document: SPA-like transitions without reloading the page
• Cross-document: transitions between MPA pages (Chrome 126+)
• CSS: ::view-transition-old(*) / ::view-transition-new(*)
• Customise: view-transition-name per element
• Fallback: no support — instant transition without animation

// Plain JS — SPA page switch
function navigate(url) {
  if (!document.startViewTransition) return render(url);
  document.startViewTransition(() => render(url));
}

// CSS custom animation
@keyframes fade-in { from { opacity: 0; } }
::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

• Streaming SSR
• Edge Runtime

The View Transitions API provides a straightforward way to implement smooth page transitions in your web application. To get started, ensure you are using a supported browser version (Chrome 111+ for same-document transitions and 126+ for cross-document transitions).

Here’s a step-by-step guide to implement the View Transitions API:

1. Check Browser Support: Before utilizing the API, confirm that the user's browser supports it using the following code:

2. Start a View Transition: To initiate a view transition, wrap your changes in a call to document.startViewTransition(). Here’s an example:

3. Style Your Transitions: You can use CSS to style the transition. For instance, to fade in new content, you could add:

With these steps, you can implement the View Transitions API effectively in your web application, providing users with smooth and visually appealing transitions between different states.

The View Transitions API is versatile and can be utilized in various scenarios to enhance user experience. Below are some common use cases:

• Single Page Applications (SPAs): In SPAs, the View Transitions API allows for seamless transitions between different views or states without reloading the page. This results in a smoother navigation experience.
• Content Updates: When dynamically updating content on a page, such as loading new articles or images, the API can visually animate these changes, making them less jarring for the user.
• Form Submissions: After a user submits a form, you can use the View Transitions API to transition to a confirmation state, giving feedback to the user while keeping the interaction smooth.
• Image Galleries: In an image gallery, the API can be employed to transition between images with a fade or slide effect, enhancing the visual appeal and user engagement.

By leveraging the View Transitions API, developers can create richer, more interactive web applications that keep users engaged and satisfied.

The View Transitions API is designed to be framework-agnostic, meaning it can be integrated into various web frameworks seamlessly. Below, we discuss how to integrate it with popular frameworks like React and Next.js.

React Integration

To use the View Transitions API in a React application, you can create a custom hook or utilize it directly within a component. Here’s a simple example:

Then, you can call this hook when you want to transition:

Next.js Integration

For Next.js, you can wrap your page transitions in the document.startViewTransition() call during routing. You can achieve this by using the useEffect hook to listen for route changes:

By following these examples, you can effectively integrate the View Transitions API into your React or Next.js applications, enhancing user experience with smooth transitions.