Both levelsWebsitesCSS

Smooth page changes without rebuilding your website

When a visitor clicks to the next page, it can glide in instead of flashing white. Here is what that does for your customers and what it takes.

Lukas Peschel4 min read

Reading level
The explanation, without code.

What this means for you

  • Visitors keep their place. The product they clicked moves into position instead of the page going blank.
  • Your site stays as it is. No rebuild, no app and no extra loading time.
  • Visitors on older browsers get the usual page change. Nothing breaks for them.

Try it

Click a product below, then go back. Now switch the animation off and do it again. That difference is what this article is about.

Same page, same speed. Only the change feels different.

Why pages flash white

Most websites are a set of separate pages. When you click a link, the browser throws the old page away and paints the new one from scratch. For a split second there is nothing on screen, and your eyes have to find their place again.

Apps feel smoother because they never throw the screen away. For years, the only way to get that on a website was to rebuild it as a Single-page appA website that loads once and then swaps its content with JavaScript, instead of loading a new page for every click.. That is a big job, and it takes extra care to keep every page visible to search engines.

Browsers can now do it for ordinary websites. You tell the browser which parts belong together on two pages, and it animates between them while the next page arrives. That animation is called a Page transitionThe animation a visitor sees while one page of a website turns into the next..

How the browser does it, with the code

Under the hood

This is the View Transitions API, in its cross-document form. When a link leads to a page of the Same originTwo pages share an origin when their addresses have the same domain, protocol and port, such as two pages on https://kooka-pacific.com., the browser takes a snapshot of the old page, loads the new one and crossfades the two. Elements that carry the same view-transition-name on both pages move and resize from their old place to their new one.

There is no JavaScript router and no state on the client. The new page is still a whole HTML document from the server, so prerendering, caching and search engines see exactly what they saw before.

What it takes

Rebuild as an app

A new way of loading every page, more JavaScript for every visitor to download, and extra work so search engines still see each page.

Smooth page changes

One line of CSS, plus a name for each part that should move. Your pages, your hosting and your place in search results stay as they are.

Some people feel unwell when things move on screen, and turn on Reduced motionA setting on phones and computers that asks apps and websites to keep animation to a minimum. on their phone or computer. A good setup respects that and changes pages instantly for them.

The code

Two pages, one rule

Both pages opt in. This rule is the whole switch:

styles.css
@view-transition {
  navigation: auto;
}

Then give an element the same name on both pages. In a list every item needs its own name, so build it from the slug:

ProductCard.tsx
<img
  src={product.image}
  alt={product.name}
  style={{ viewTransitionName: `product-${product.slug}` }}
/>

And respect reduced motion. Without this rule the animation plays even for people who asked their system for less of it:

styles.css
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation: none;
  }
}

Which browsers show it

Chrome, Edge and Safari animate page changes today, and Firefox does so in part. Older browsers simply change pages the usual way, so nobody gets a broken site.

Support in November 2026

BrowserWithin a pageBetween pages
Chrome, Edge111 and newer126 and newer
Safari18 and newer18.2 and newer
Firefox144 and newerPartly, from 144

Browsers without support ignore the at-rule and navigate as usual, so there is nothing to detect. The demo above uses the same-document form, document.startViewTransition(). Current numbers are on caniuse.com.

Want this on your site?

We add smooth page changes to existing websites and shops, and test them on real phones, with motion turned on and off.

See what we buildSay g'day

Sources

  1. View Transition APIMDN Web Docs, checked
  2. View Transitions (cross-document)Can I use, checked
  3. prefers-reduced-motionMDN Web Docs, checked
  4. @view-transitionMDN Web Docs, checked
  5. CSS View Transitions Module Level 2W3C, checked
  6. WebKit Features in Safari 18.2WebKit, checked
  7. Firefox 144 for developersMDN Web Docs, checked

Words from this article

Page transition
The animation a visitor sees while one page of a website turns into the next.
Single-page app
A website that loads once and then swaps its content with JavaScript, instead of loading a new page for every click.
Same origin
Two pages share an origin when their addresses have the same domain, protocol and port, such as two pages on https://kooka-pacific.com.
Reduced motion
A setting on phones and computers that asks apps and websites to keep animation to a minimum.

Lukas PeschelFounder of KookaLukas runs Kooka, a small software studio in Brisbane. He writes here about the tech we try out before we use it for clients.

Keep reading

Made with care by Kooka. Kooka, Brisbane, Queensland, Australia. hello@kooka-pacific.com