View Transitions API
The View Transitions API is a browser API that enables smooth, animated transitions between different views or pages on a website with just a few lines of code, previously requiring complex JavaScript libraries.
§ 1 Definition
The View Transitions API is a W3C-standardized browser API that provides a declarative way to animate transitions between different visual states on a website. It works for both single-page applications (same-document transitions where JavaScript swaps content) and multi-page applications (cross-document transitions between full HTML pages). The API captures a snapshot of the current view, updates the DOM to the new state, and animates the transition between the snapshots. Developers can customize the animation using standard CSS animation properties via pseudo-elements. The View Transitions API eliminates the need for complex JavaScript animation libraries and makes smooth page transitions as simple as a CSS property. It represents a fundamental improvement in how users perceive navigation speed: transitions make the site feel faster even if the actual load time is unchanged, because the visual continuity masks latency.
§ 2 How It Works
When a view transition is triggered, the browser: 1. Captures a screenshot of the current page state. 2. Takes a snapshot of the new page state (after DOM update). 3. Creates a pseudo-element tree in the document's overlay: - ::view-transition (root container) - ::view-transition-group(name) (per animated element) - ::view-transition-image-pair(name) - ::view-transition-old(name) (old state snapshot) - ::view-transition-new(name) (new state snapshot) 4. Animates from the old snapshot to the new snapshot using CSS animations. 5. Removes the overlay when the transition completes. For same-document transitions, `document.startViewTransition(() => updateDOM())` triggers the process. For cross-document (MPA) transitions, the CSS `@view-transition` rule opts pages in, and the browser handles the rest automatically.
§ 3 Customizing Transitions
By default, the View Transitions API provides a crossfade. Customization is done entirely through CSS: ```css /* Custom transition for the page root */ ::view-transition-old(root) { animation: slide-out-to-left 0.3s ease-out; } ::view-transition-new(root) { animation: slide-in-from-right 0.3s ease-in; } /* Isolate specific elements from the page transition */ .header { view-transition-name: site-header; } ``` The `view-transition-name` CSS property lets you assign specific elements to their own transition layers. This enables independent animation for different parts of the page: the header might crossfade while the content slides. This granular control, combined with CSS animation tools, enables sophisticated transitions without JavaScript. MPA transitions additionally support the `pageswap` and `pagereveal` events for coordinating complex multi-page animations.
§ 4 Browser Support and Adoption
The View Transitions API is supported in Chrome 111+ (same-document) and Chrome 126+ (cross-document). Safari 18+ supports same-document transitions. Firefox has the feature behind a flag. Cross-document (MPA) transitions are newer and have narrower support. For production use, implement progressive enhancement: transitions enhance the experience for supporting browsers without breaking the experience for others. The API is already widely adopted: frameworks like Astro, Next.js, and Nuxt have built-in View Transitions support. The impact on perceived performance is significant enough that it is becoming a standard expectation for modern web experiences.
§ 5 Common questions
- Q. Does the View Transitions API work with frameworks like React?
- A. Yes. Frameworks like Astro, Next.js (App Router), Nuxt 3, and SvelteKit have built-in support. For any framework, you can use `document.startViewTransition()` in your route change handler. Framework wrappers handle the details.
- Q. Do view transitions affect performance?
- A. Minimally. The browser captures snapshots efficiently. The animation runs on the compositor thread, not the main thread, so it does not block JavaScript execution. Performance impact is negligible compared to custom JavaScript-based animation libraries.
- Q. Can I use view transitions on every page navigation?
- A. Yes, for MPA transitions. Add `@view-transition { navigation: auto; }` to your CSS and every same-origin navigation gets a transition. For SPAs, you need to call `startViewTransition()` in your router. The API is designed to be universally applicable.
- The View Transitions API enables smooth page transitions with minimal code, previously requiring complex libraries.
- It works for both SPAs (same-document) and MPAs (cross-document navigation).
- Customization is entirely CSS-based, running on the compositor thread for performance.
- Use progressive enhancement: transitions enhance the experience but should not break non-supporting browsers.
We implement View Transitions to make your site feel instant. Smooth page transitions that mask loading time and delight users, implemented as progressive enhancement so every browser gets a great experience. Check our Web Development services.
Get in touchThe View Transitions API is a browser API that enables smooth, animated transitions between different views or pages on a website with just a few lines of code, previously requiring complex JavaScript libraries.
Category: Front End (also: Ai)
Author: Atomic Glue Editorial Team
## Definition
The [View Transitions API](/glossary/view-transitions-api) is a [W3C](https://www.w3.org/)-standardized browser API that provides a declarative way to animate transitions between different visual states on a website. It works for both single-page applications (same-document transitions where JavaScript swaps content) and multi-page applications (cross-document transitions between full HTML pages). The API captures a snapshot of the current view, updates the DOM to the new state, and animates the transition between the snapshots. Developers can customize the animation using standard CSS animation properties via pseudo-elements. The View Transitions API eliminates the need for complex JavaScript animation libraries and makes smooth page transitions as simple as a CSS property. It represents a fundamental improvement in how users perceive navigation speed: transitions make the site feel faster even if the actual load time is unchanged, because the visual continuity masks latency.
## How It Works
When a view transition is triggered, the browser: 1. Captures a screenshot of the current page state. 2. Takes a snapshot of the new page state (after DOM update). 3. Creates a pseudo-element tree in the document's overlay: - ::view-transition (root container) - ::view-transition-group(name) (per animated element) - ::view-transition-image-pair(name) - ::view-transition-old(name) (old state snapshot) - ::view-transition-new(name) (new state snapshot) 4. Animates from the old snapshot to the new snapshot using CSS animations. 5. Removes the overlay when the transition completes. For same-document transitions, `document.startViewTransition(() => updateDOM())` triggers the process. For cross-document (MPA) transitions, the CSS `@view-transition` rule opts pages in, and the browser handles the rest automatically.
## Customizing Transitions
By default, the View Transitions API provides a crossfade. Customization is done entirely through CSS: ```css /* Custom transition for the page root */ ::view-transition-old(root) { animation: slide-out-to-left 0.3s ease-out; } ::view-transition-new(root) { animation: slide-in-from-right 0.3s ease-in; } /* Isolate specific elements from the page transition */ .header { view-transition-name: site-header; } ``` The `view-transition-name` CSS property lets you assign specific elements to their own transition layers. This enables independent animation for different parts of the page: the header might crossfade while the content slides. This granular control, combined with CSS animation tools, enables sophisticated transitions without JavaScript. MPA transitions additionally support the `pageswap` and `pagereveal` events for coordinating complex multi-page animations.
## Browser Support and Adoption
The View Transitions API is supported in Chrome 111+ (same-document) and Chrome 126+ (cross-document). Safari 18+ supports same-document transitions. Firefox has the feature behind a flag. Cross-document (MPA) transitions are newer and have narrower support. For production use, implement progressive enhancement: transitions enhance the experience for supporting browsers without breaking the experience for others. The API is already widely adopted: frameworks like Astro, Next.js, and Nuxt have built-in View Transitions support. The impact on perceived performance is significant enough that it is becoming a standard expectation for modern web experiences.
## Common questions
Q: Does the View Transitions API work with frameworks like React?
A: Yes. Frameworks like Astro, Next.js (App Router), Nuxt 3, and SvelteKit have built-in support. For any framework, you can use `document.startViewTransition()` in your route change handler. Framework wrappers handle the details.
Q: Do view transitions affect performance?
A: Minimally. The browser captures snapshots efficiently. The animation runs on the compositor thread, not the main thread, so it does not block JavaScript execution. Performance impact is negligible compared to custom JavaScript-based animation libraries.
Q: Can I use view transitions on every page navigation?
A: Yes, for MPA transitions. Add `@view-transition { navigation: auto; }` to your CSS and every same-origin navigation gets a transition. For SPAs, you need to call `startViewTransition()` in your router. The API is designed to be universally applicable.
## Key takeaways
- The View Transitions API enables smooth page transitions with minimal code, previously requiring complex libraries.
- It works for both SPAs (same-document) and MPAs (cross-document navigation).
- Customization is entirely CSS-based, running on the compositor thread for performance.
- Use progressive enhancement: transitions enhance the experience but should not break non-supporting browsers.
## Related entries
Last updated July 2026. Permalink: atomicglue.co/glossary/view-transitions-api