View Transitions API: App-Like Page Animations on Ordinary Websites

When you tap a product on a good shopping app, the photo grows into the detail screen and the rest of the page settles around it. On a normal website the same tap blanks the screen for a moment and a new page appears. A browser feature called the View Transitions API closes that gap, and as of November 2026 it works in most of the browsers your customers use.

What the feature actually does

A view transition is a short animation the browser runs between two states of a page. The browser takes a picture of the old state, builds the new state, and then cross-fades or moves matching elements between the two. Your developer decides which elements should travel, for example a product photo or a heading, and the browser does the animation work itself.

Before this existed, such effects needed animation libraries, extra JavaScript and a good deal of testing. Now the heavy lifting is built into the browser, which usually means less code to download and fewer things to break.

Two kinds, with different support

There are two versions, and the difference matters when you plan a project.

• Same-document transitions animate changes inside one page, such as opening a gallery image, switching tabs or reordering a list. Chrome and Edge support them from version 111, Safari from 18 and Firefox from 144. In October 2025 web.dev announced they had become Baseline Newly available, meaning they work in the current versions of all three major browser engines.
• Cross-document transitions animate the move between two separate pages of the same website, with no JavaScript needed to start them. Chrome and Edge support them from version 126 and Safari from 18.2. Chrome's documentation states that Firefox does not support them, as of this writing.

Cross-document transitions only work between pages on the same origin, meaning the same address, and both pages must opt in with a short piece of CSS. Chrome also skips the effect if a navigation takes longer than four seconds.

Does an unsupported browser break the page?

No. This is the most reassuring part for a business owner. If a browser does not understand the feature, it simply ignores it and the page changes the way it always did. Nobody sees an error, and nobody loses access to your content. The animation is a polish layer, not a requirement, which is exactly how it should be built.

That also means you should never let an important action depend on it. A booking form must work identically with or without the glide.

Where it helps a business site

• Catalogue to product page: a jewellery or furniture listing where the chosen photo expands into the detail page makes the site feel considered.
• Step-by-step forms: a short slide between steps of a quote request tells people that they are progressing, not starting over.
• Filters and sorting: when a list reorders, items that slide into place are easier to follow than items that jump.
• Menus and drawers: a mobile menu that fades smoothly feels less abrupt.

Be honest about the other side. A five-page company profile, a clinic address page or a landing page gains almost nothing from page animation. If the pages load slowly, a transition makes the wait feel longer, not shorter. Fix speed first; our note on why a slow website quietly kills sales explains how.

Motion, comfort and accessibility

Some people feel dizzy or unwell when large objects slide or zoom across a screen. Phones and computers let them switch on a setting to reduce motion, and websites can read it through a rule called prefers-reduced-motion. MDN lists this as Widely available since January 2020, so there is no excuse to ignore it. Ask your developer to switch the animations off, or reduce them to a quick fade, when that setting is on.

Keep animations short, around a third of a second is plenty, and never animate the whole screen when only one card is changing. Motion should explain what happened, not show off. This is part of good UI/UX design, and the same thinking runs through our design articles.

A short checklist for your developer

1. Ask which kind of transition is planned, same-document or cross-document, and what Firefox users will see.
2. Confirm the site still works with the feature switched off.
3. Ask for a reduced-motion version, and test it on a phone with the setting enabled.
4. Limit animated elements to one or two per screen, such as the product photo and its title.
5. Measure speed before and after, using the checks in the Core Web Vitals reports, and drop the effect if the numbers worsen.
6. Test on a mid-range Android phone, not only a new laptop.

How we approach it at VS Tech Builders

We treat view transitions as an optional finishing touch on business websites and online stores, added after layout, content and speed are right. If your site is built on Next.js, as ours is, the effect can be added to specific journeys without rebuilding anything. If you would like a simple opinion on whether your pages would benefit, send us a message and we will tell you plainly, including when the answer is no.

Sources

Checked on 3 November 2026. Technology changes quickly; always confirm details with the official source before you act on them.

• View transitions — Chrome for Developers
• Cross-document view transitions for multi-page applications — Chrome for Developers
• Same-document view transitions are now Baseline Newly available — web.dev
• prefers-reduced-motion — MDN Web Docs

Frequently asked questions

What is the View Transitions API in simple words?

It is a browser feature that animates the change from one page or screen to another, for example a product photo growing into its detail page. Your developer picks which elements move, and the browser handles the animation. It replaces much of the JavaScript that animation effects used to need, and unsupported browsers simply skip it.

Do view transitions work in all browsers?

Same-document transitions work in current Chrome, Edge, Safari and Firefox. Cross-document transitions between separate pages work in Chrome and Edge 126 or later and Safari 18.2 or later, but not in Firefox, according to Chrome's documentation as of November 2026. Browsers without support just show a normal page change.

Will page animations slow down my website?

They can if the pages are already slow, because the animation waits for the new page. Chrome skips the effect when a navigation takes longer than four seconds. Keep animated elements few, measure speed before and after, and fix loading problems first. A fast site with no animation beats a slow site with a fancy one.

Is it safe for people sensitive to motion?

Only if the site respects the reduce-motion setting that phones and computers offer. Developers read it with the prefers-reduced-motion rule and can turn animations off or soften them to a quick fade. Ask for this in writing and test it with the setting switched on before launch.