Smooth page navigations with the View Transition API

We're excited to announce the implementation of View Transitions API on our website, enhancing navigation fluidity and user feedback. This helps both us and you as a visitor to smoothly navigate our website from the very start of 2025. This UX update not only makes navigation more visually appealing, it also provides better feedback about page load states.

  • by Erwin Hofman
  • Published
  • Reading time ± 3 minutes
  • RUMvision
Smooth page navigations with the View Transition API

Here's the thing: benefits of optimizing Core Web Vitals are diverse, SEO and conversion being part of them. But there's also 'too fast'. For example when a website is prefetching pages that a user is likely to visit.

The speed paradox

When combined with Speculation Rules, a page might have been fully rendered even before visiting. This is called perendering and results in instant pageloads.

Prerender is usually a positive experience for users as it allows fast page rendering—often instant

web.dev

Prerendering

Modern browsers support prerendering through Speculation Rules, allowing pages to be fully rendered before a user clicks. This browser-native API can be implemented via inline JSON or HTTP headers, enabling incredibly fast page loads with Largest Contentful Paint times below 175ms.

Pageloads can be too fast

In cases of near-instant loading, users may struggle to notice content updates. Headers, text, and even hero images can change without registering in the user's perception. This is where View Transitions API becomes interesting.

feature: View transitions
Limited availability

View transitions is not Baseline because it does not work in some of the most widely-used browsers.

Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.

View Transition API

The beauty of View Transitions lies in its simplicity. No JavaScript needed as the basic implementation requires only minimal CSS. Page transitions will start to feel more smooth already after adding the following to your stylesheet:

@view-transition {
navigation: auto;
}

Providing visual confirmation

The View Transitions API provides a native solution for creating smooth, animated transitions between page states. By implementing this API, we've added subtle animations that:

  • Provide visual confirmation of navigation
  • Make state changes more comprehensible
  • Maintain context between page views
  • Create a more polished, app-like feel

SPA vs MPA and browser support

This app-like feeling is one of the key things that SPAs tried to address. And SPAs (or just client side rendering in general) were actually the first types of rendering that could benefit from View Transition SPA since Chrome 111 (March 2023).

Two major developments expanded its reach in 2024:

  1. Cross-document View Transitions (Chrome 126, June 5th 2024)
    • Enabled support for Multi-Page Applications (MPAs)
    • Allows transitions between full page renders
  2. Safari Support (Safari 18.2, December 2024)
    • Including cross-document in Safari 18.2 (December 9th 2024)
    • Expanded the feature's reach significantly
feature: Cross-document view transitions
Limited availability

Cross-document view transitions is not Baseline because it does not work in some of the most widely-used browsers.

  • Only supported in Chrome 126, Edge 126 and Safari 18.2
  • Continue reading about cross doc opt in

Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.

Cross-document support (so, for MPAs) is interesting as the page is re-rendered upon user navigation. And the View Transition API now comes with support for those use-cases as well.

Taking it to the next step

We didn't stop with the basic implementation. Instead, we introduced additional JavaScript to detect:

  • from which page a user is navigating
  • and to what page that user is navigating to

When then determine if there should be dynamic identification of elements:

  • tracks navigation paths
  • identifies corresponding elements across pages
  • apply targeted transitions

For example, elements on a blog detail page such as this very article you're reading know needs to be tied together with the same element on the listing page. This can be done using the new view-transition-name CSS property. In our case, this became as following:

/* blog detail */
body.blog article[itemscope] h1[itemprop] {
    view-transition-name: heading;
}
body.blog article[itemscope] .lead {
    view-transition-name: intro;
}
body.blog .blog-hero picture img {
    view-transition-name: hero;
}

When done correctly, a browser knows the position of the previously visited page and the upcoming page upon page navigation and can start the animation of all individually marked elements.

Page transitions over at our help-center got enhanced in the same way. However, there's a weird quirk on longer pages where the width of the text containing seems to be jumping. There's a fix underway as part of Chrome 132.

Optimize first, animate second

Before implementing View Transitions, ensure your baseline performance metrics are solid:

  1. Monitor your TTFB and FCP using RUM tools
  2. Identify and fix caching gaps
  3. Verify performance improvements across all page types

Only then should you enhance your site with View Transitions - creating that perfect balance of speed and visual feedback that delights users while maintaining peak performance.

Free Core Web Vitals tool

Our publicly available Core Web Vitals tool using Google's free data is a start. However, it won't help you spot outliers nor underperforming pages automatically.

Detailed TTFB with alerts

Instead, start monitoring your real user metrics today and lay the groundwork for smooth, engaging page transitions.

Share blog post