SSGOI

Why not View Transitions

Where the browser's View Transition API stops and SSGOI's presets begin.

Same-document document.startViewTransition() is available across current browsers, so this is not a support argument. SSGOI picks a different control model: it animates the live pages instead of snapshots of them. Current platform support

What a preset packages

Each of these needs geometry, temporary layers and the leaving page's real DOM — the parts an app would otherwise rebuild per effect.

Zoom transition: The whole detail page unfolds from its image.
Zoom — The whole detail page unfolds from its image.
Film transition: A runtime scene with live video and several springs.
Film — A runtime scene with live video and several springs.
Sheet transition: A live backdrop sits between the two pages.
Sheet — A live backdrop sits between the two pages.

Snapshot tree, or live scene

Both can use the Web Animations API. What differs is the material the animation runs on.

View Transition API
::view-transition
└─ group
   └─ image-pair
      ├─ old snapshot
      └─ new snapshot

SSGOI
route boundary unmounts OUT ─┐
route boundary mounts IN ────┼─ preset measures + animates live DOM
temporary backdrop / pieces ─┘
ConcernView Transition APISSGOI
What is animatedOld and new snapshots in a generated pseudo-element tree.The real leaving and arriving DOM, plus layers a preset creates.
Animation controlCSS or Web Animations on the generated pseudo-elements.Web Animations on live elements, driven by spring timelines.
Route meaningThe browser starts a transition; your code still decides what the navigation means.on/except, from/to and ordered pick the preset and resolve direction.
InterruptionThe running transition can be skipped; your code owns what replaces it.A new navigation force-completes the previous run, removes the page it had reinserted, and starts the next one.
Layout ownershipIndependent of framework mount and persistent-layout lifetime.Boundaries state which routed region may leave, enter or stay mounted.
ReuseEach app measures geometry and names its own snapshot groups.A preset owns the measuring, scene setup, pairing and cleanup once.
None of this makes the native API a cross-fade. You can build shared elements and elaborate choreography with it — you just keep owning the geometry, the intermediate scene pieces, the routing policy and the cleanup.

Choose by ownership

Use the native API when your app wants to name its own snapshot groups. Use SSGOI when the same interaction should be reusable across routes, routers and frameworks.

The full engineering account — geometry, live video, temporary DOM, blur layers and interruption — is in Why I didn't use the View Transition API.

Read next