v147 · JS · CSS · concept 3 of 3

Panel Switcher

A sidebar + content panel. Only the content transitions — the sidebar and toolbar stay fully interactive throughout. Click a nav item while a transition is running to chain them.

element.startViewTransition() is not available in this browser. This demo requires Chrome 147+.

Platform Dashboard idle

how it works

The content panel is the transition scope. When a nav item is clicked, contentPanel.startViewTransition() replaces only that subtree. The sidebar, toolbar, and scroll position are never frozen — you can click another nav item mid-transition and the transitions will chain.

/* CSS: content panel is the scope. */
.content-panel {
  view-transition-scope: all;
  contain: layout;
}
/* Title cross-fades with a stable name. */
.panel-title { view-transition-name: panel-title; }

/* JS: only the content panel transitions. */
contentPanel.startViewTransition(() => {
  renderPanel(contentPanel, PANELS[key]);
});

/* Sidebar and toolbar are outside the scope —
   they remain interactive at all times. */

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗