View Transition API

The View Transition API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).

Concepts and usage

View transitions are a popular design choice for reducing users' cognitive load, helping them stay in context, and reducing perceived loading latency as they move between states or views of an application.

However, creating view transitions on the web has historically been difficult:

• Transitions between states in single-page apps (SPAs) tend to involve writing significant CSS and JavaScript to:
  • Handle the loading and positioning of the old and new content.
  • Animate the old and new states to create the transition.
  • Stop accidental user interactions with the old content from causing problems.
  • Remove the old content once the transition is complete. Accessibility issues like loss of reading position, focus confusion, and strange live region announcement behavior can also result from having the new and old content both present in the DOM at once.
• Cross-document view transitions (i.e., across navigations between different pages in MPAs) have historically been impossible.

The View Transition API provides an easy way of handling the required view changes and transition animations for both the above use cases.

Creating a view transition that uses the browser's default transition animations is very quick to do, and there are features that allow you to both customize the transition animation and manipulate the view transition itself (for example specify circumstances under which the animation is skipped), for both SPA and MPA view transitions.

See Using the View Transition API for more information.

Interfaces

ViewTransition

Represents a view transition, and provides functionality to react to the transition reaching different states (e.g., ready to run the animation, or animation finished) or skip the transition altogether.

Extensions to other interfaces

Document.startViewTransition()

Starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it.

PageRevealEvent

The event object for the pagereveal event. During a cross-document navigation, it allows you to manipulate the related view transition (providing access to the relevant ViewTransition object) from the document being navigated to, if a view transition was triggered by the navigation.

PageSwapEvent

The event object for the pageswap event. During a cross-document navigation, it allows you to manipulate the related view transition (providing access to the relevant ViewTransition object) from the document being navigated from, if a view transition was triggered by the navigation. It also provides access to information on the navigation type and current and destination document history entries.

The Window pagereveal event

Fired when a document is first rendered, either when loading a fresh document from the network or activating a document (either from back/forward cache (bfcache) or prerender).

The Window pageswap event

Fired when a document is about to be unloaded due to a navigation.

HTML additions

<link rel="expect">

Identifies the most critical content in the associated document for the user's initial view of the page. Document rendering will be blocked until the critical content has been parsed, ensuring a consistent first paint — and therefore, view transition — across all supporting browsers.

CSS additions

>

At-rules

@view-transition

In the case of a cross-document navigation, @view-transition is used to opt in the current and destination documents to undergo a view transition.

Properties

view-transition-name

Specifies the view transition snapshot that selected elements will participate in, which enables an element to be animated separately from the rest of the page during a view transition.

view-transition-class

Provides an additional method of styling selected elements that have a view-transition-name.

Pseudo-classes

:active-view-transition

Matches elements when a view transition is in progress.

:active-view-transition-type()

Matches elements when a view transition of a specific type is in progress.

Pseudo-elements

::view-transition

The root of the view transitions overlay, which contains all view transitions and sits over the top of all other page content.

::view-transition-group()

The root of a single view transition.

::view-transition-image-pair()

The container for a view transition's old and new views — before and after the transition.

::view-transition-old()

A static snapshot of the old view, before the transition.

::view-transition-new()

A live representation of the new view, after the transition.

Examples

• Basic View Transitions SPA demo: A basic image gallery demo with view transitions, featuring separate animations between old and new images, and old and new captions.
• Basic View Transitions MPA demo: A sample two-page site that demonstrates usage of cross-document (MPA) view transitions, providing a custom "swipe up" transition when the two pages are navigated between.
• View transitions match-element demo: An SPA featuring animated list items, demonstrating the use of the match-element value of the view-transition-name property to animate individual elements.
• HTTP 203 playlist: A video player demo app that features several different SPA view transitions, many of which are explained in Smooth transitions with the View Transition API.
• Chrome DevRel view transitions demos: A series of View Transition API demos.

Specifications

Browser compatibility

>

api.Document.startViewTransition

css.at-rules.view-transition

See also

• Smooth transitions with the View Transition API on developer.chrome.com (2024)
• View Transition API: Creating Smooth Page Transitions on stackdiary.com (2023)
• View Transitions API: Single Page Apps Without a Framework on DebugBear (2024)