demo · v140

Route Shell

A two-pane app shell: nav stays put, content swaps. With view-transition-group: contain on the shell, the content swap pseudo lives inside the content pane — the nav never slides past it, the rest of the page never twitches.

Home

Welcome to the shell. Click a nav item — only the right pane animates, the left nav stays still.

.app  { view-transition-group: contain;  view-transition-name: app-shell; }
.nav  { view-transition-group: contain;  view-transition-name: nav-shell; }
.content { view-transition-name: route-content; }

// Route change:
appShell.startViewTransition(() => render(route));

see also