Pin persistent chrome

Name the header and switch its animation off so only content slides.

Next.js docsnextjs.org
A sliding header breaks the user's spatial anchor. They need one fixed reference point to understand that the content moved, not the entire viewport.
Anchoring the headerRead docs ↗

From vercel-react-view-transitions, css-recipes.md.

The header during a slide

Go forward, then back.

Header in the pageBad
no viewTransitionName
Header pinnedGood
viewTransitionName: 'site-header'
<header style={{ viewTransitionName: 'site-header' }}>…</header>

::view-transition-group(site-header) {
  animation: none;
  z-index: 100;
}
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }

Why it matters, pros and cons

Why it matters

A page boundary snapshots everything inside it, header included. A name pulls the header into its own group; animation: none holds it still.

Pros

  • One fixed point while content moves.
  • z-index keeps it above the sliding pages.
  • Same fix for sidebars, players and toasts.

Cons

  • view-transition-name: none is the default; it pins nothing.
  • Named elements ignore clicks mid-transition.
  • With backdrop-filter, hide the old snapshot.