View Transitions between pages MPA

Try: Click back to page A. This page uses the same transition names but a different layout, so the browser can morph shared elements across documents instead of just cross-fading the whole page.

Details

Campaign breakdown

Same origin, normal anchor navigation, no JavaScript router hook required. The browser handles the transition as part of the page navigation itself.

Email 61% of conversions

Social 24% of conversions

Referral 15% of conversions

Source

@view-transition {
  navigation: auto;
}

.hero {
  view-transition-name: page-hero;
}

.hero-badge {
  view-transition-name: page-badge;
}

Constraint: This works best when you serve the files over HTTP and navigate between same-origin pages. Browser chrome actions or cross-origin redirects can skip the transition.