How It Works
This uses cross-document view transitions for MPAs (multi-page applications). The API operates in three steps:
- Browser captures snapshots of old and new states
- DOM updates occur while rendering is suppressed
- CSS animations power the visual transitions
Elements with the same view-transition-name (like the
profile image and heading) morph smoothly between pages. The rest of
the page content uses the default slide animation defined with
::view-transition-old(root) and
::view-transition-new(root).