Tl;dr:

The View Transitions API is an experimental browser API supported in Google Chrome. It streamlines the visual transitions between different pages or elements using a combination of CSS pseudo elements, JavaScript, and screenshots of the old and new DOM state. By reducing the need for complex custom JavaScript and CSS, this API provides a new opportunity to elevate the Shopify admin experience.

Impact potential

For merchants, the impacts of the View Transitions API will be experienced through:

  • Perceived performance: View transitions used to animate navigation or state changes in conjunction with prefetching, lazy loading, and caching will make the Shopify admin feel faster and more responsive.
  • Enhanced accessibility: Built in features for managing focus and other accessibility concerns during a view transition will make taking action or changing contexts a better experience for all merchants.
  • Reduced cognitive load: Page transitions between list and detail views will make clearer connections between the levels of detail in commerce objects like products.

For admin builders, systemizing the View Transitions API with shared patterns will support:

  • Streamlined development: Systemized ways to use and share transitions will make it easier for admin builders to create and maintain high quality animations.
  • Domain specific solutions: The flexibility of customizing view transitions using their pseudo elements opens up possibilities for systemizing crafted, engaging ways to introduce and reinforce important commerce concepts shared across the Shopify admin that will make it a more enjoyable tool for merchants to use.

    On this page