View transitions: cross-page motion

Recap from A7 lesson 8 — now applied to layouts

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

That meta tag opts the page into cross-document transitions. Click a link → browser captures BEFORE and AFTER snapshots → crossfades them. Free.

Naming elements that should PAIR

Hero animations (iOS-style):

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

If the same view-transition-name exists on BOTH pages, the browser ANIMATES between their positions/sizes. A thumbnail on page A morphs into a full-size image on page B.

Unique names per element pair. Don't name multiple elements the same — only one would pair.

Pseudo-elements for control

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

::view-transition-old(hero) {
  animation-name: hero-out;
}

Pseudos give you the OLD (outgoing) and NEW (incoming) views as separate animatable layers. Customize each.

When to use

• SPA-feel multi-page sites — feels like a single app.
• E-commerce: product list → product detail with image morph.
• Blog: title in list → title in article.

Don't overdo it. Most navigations should just be instant. Use named transitions sparingly on the 2-3 most important state changes.