In today’s modern web, speed and smoothness of user experience are essential. When navigating from one page to another, even a small delay or a sudden change can make the experience feel slow or disjointed. To improve this, developers often use techniques like prefetching, caching, and lazy loading.
But there’s an exciting new development aimed at making transitions between pages much smoother and more engaging: the Transition Page API. This API, still under development and being implemented in some modern browsers, allows developers to better control and animate the switch between pages.
What is the Transition Page API?
The Transition Page API is an interface that lets developers orchestrate custom visual transitions between two web pages, going beyond the usual “blank screen” page load. Instead of simply swapping content, the API provides tools to keep visual elements persistent, animate them, and create visual continuity during navigation.
Imagine clicking a link and seeing an element — like an image, title, or card — smoothly transform and move into place on the new page, maintaining a visual connection with the previous page. This makes the experience more natural and enjoyable.
The view transition pseudo-element tree
To handle creating the outbound and inbound transition animations, the API constructs a pseudo-element tree with the following structure:
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)In the case of same-document transitions (SPAs), the pseudo-element tree is made available in the document. In the case of cross-document transitions (MPAs), the pseudo-element tree is made available in the destination document only.