Cross-Document View Transitions (SPA & MPA)

View Transitions aren't limited to in-page DOM updates. You can also use them across full page navigations — both in SPAs and traditional MPAs.

Same-Document (SPA)

In a framework like React, wrap your route change in a view transition. This works especially well with routers that give you navigation hooks.

Cross-Document (MPA)

For multi-page apps, add the following meta tag to enable cross-document view transitions:

<meta name="view-transition" content="same-origin" />

With that single tag, the browser will animate between pages on the same origin using the View Transition API — no JavaScript required.

Combine this with shared elements (same view-transition-name on both pages) for seamless hero-image or header transitions.