Skip to content
vtbag logo @vtbag

Last updated: First published:

The View Transition API

The View Transition API is a rather new API. In this section you can find…

While I add more pages, I’m also happy that I can offer some links to previous work on the astro-vtbot package↗, especially an in depth same-document example↗

References

Section titled “References”

Looking for more information about the View Transition API? Here are some references:

W3C Drafts (Preliminary Specs)

Section titled “W3C Drafts (Preliminary Specs)”

Recent Changes

Section titled “Recent Changes”

Test whether your browser supports the latest features of the View Transition API on this test page.

WhenWhatWhere
2026-06-29You cannot use none or identifiers starting with -ua- as names for view transition types. If you try to add those to the view transition’s types set, they will simply be ignored. The latter is consistent with the restriction that view transition names starting with -ua- are reserved for use by the browser (the user agent).View Transition Types↗
2026-04-29Duplicate view transition names will be ignored instead of causing the view transition to fail. Originally, if the same view transition name was found twice during a capturing phase, the view transition was skipped. The new behaviour will automatically remove view transition names with non-unique definitions and continue the view transition with the remaining unique names. (Not yet supported by any browser)View Transition Activation↗
2026-03-09view-transition-scope: auto (outdated) was superseded by view-transition-scope: all. You can use this property to hide view transition names inside a DOM subtree from view transitions started outside of it.view-transition-scope↗
2026-01-26contain: view-transition (outdated) was superseded by view-transition-scope: auto. (outdated)view-transition-scope↗
Level 1 of the spec was merged into Level 2. Level 1 is only for historical reference. Development of the API now happens solely in the Level 2 document.
2025-10-17The view transition object offers a waitUntil() function that can be called with a promise. Now the view transitions finished promise does not only wait for the animations on pseudo-elements to end, but also waits for all promises passed via waitUntil() to settle.Level 2, waitUntil↗
2025-10-02Scoped view transitions, where startViewTransition() can be called on DOM elements. To distinguish (element-)scoped view transitions from what we had before, cross-document view transitions and view transitions started with document.startViewTransition() might also be called global view transitions.Level 2, Scoped View Transitions↗
2025-10-02The transitionRoot property of the view transition object returns the root element of a scoped view transition. For a global view transition it returns the documentElement.Level 2, transitionRoot↗
2025-10-02A new value view-transition (outdated) for the contain property was introduced. In March 2026, it was superseded by view-transition-scope: all, which ensures that view transition names are not visible outside a subtree.Level 2, View Transition Name Isolation↗
2025-08-25Expose the currently active view transition object as activeViewTransition on the document, or on an element for scoped view transitions.Level 2, Exposing current transition↗
2025-06-18The old, new, and image-pair pseudos now also inherit the timing function, iteration count, direction, play state animation properties.Level 1, User Agent Styles↗
2025-06-16Nested view transition groups are children of a new pseudo-element, which is the sibling of the image pair. The border width of this ::view-transition-group-children() pseudo-element gets automatically copied over from the original element.Level 2, Group Children↗
2025-03-24Change to view-transition-name: auto when the element has an id property: Instead of using the id as view transition name, now generates a random name like match-element.Level 2, View Transition Name↗
2025-02-20Added view-transition-name: match-element; for automatically assigning element specific view transition names.Level 2, View Transition Name↗

Upcoming Topics

Section titled “Upcoming Topics”

These may or may not make it into the spec.

WhenWhatWhere
2025-09-18Support two phases for cross-document view transitions: instead of waiting for enough content of the new page to load before starting animations, begin them on the old page by hopping through a quickly computable preview state for a smoother user experience.Explainer: Two-phase view transition↗
2025-08-20Allow the view transition pseudo-elements inside the :has() pseudo-class.#12630↗
2025-08-05Introduce DOM nodes as proxies to pseudo-elements. This would for example allow us to define an event listener for ::view-transition-new(button) using such a proxy.#12575↗
2025-06-18Also copy border radius and corner shape form old and new original elements and animate the ::view-transition-group-children() from old to new values.#12357↗, #12363↗
2025-05-28User defined view transition names must not start with -ua- as those are reserved for the user agent, e.g. for match-element and auto.#12241↗
2025-01-29::view-transition-new(*) { pointer-events: auto } to forward pointer events from the pseudo-element to the original element.#11596↗

MDN

Section titled “MDN”

Explainers

Section titled “Explainers”

Must Reads

Section titled “Must Reads”

Highly recommended introductions by examples and deep dives: