Browser & router support

SSGOI runs in the browsers you already support, with the router you already use.

Browser runtime

Springs are simulated up front and handed to the browser as keyframes, so the animation itself runs natively.

Your router keeps navigation

SSGOI watches the route boundary your framework already mounts and unmounts. It reads browser history entry identities to remember each visit's effect. It wraps pushState/replaceState to retain a namespaced entry marker alongside existing router state, even when native entry information arrives late. Your router still owns URLs and navigation.

Motion the browser plays natively

Spring motion is simulated up front and handed to the browser as Web Animations API keyframes. The same config runs unchanged anywhere the APIs below exist.

Runtime targets

Current Chrome, Safari, Firefox and Edge, on desktop and mobile.

Chrome

Safari

Firefox

Edge

This repo does not ship a browserslist or a support policy, so rather than quote version numbers that nothing generates, here is what the engine actually calls. If a browser has all of it, SSGOI runs; the practical floor is the 2020 Web Animations API update.

What SSGOI calls	What it is for
`Element.animate()`	Plays every transition. Spring motion is simulated up front and handed over as keyframes.
`Animation.ready, writable currentTime`	The startup handoff that keeps mount and layout jank off the animation timeline.
`MutationObserver`	Noticing that a marked route element was added to or removed from the page.
`queueMicrotask()`	Flushing an unmount outside the observer callback that reported it.
`Element.scrollTo({ top, left })`	Restoring and resetting scroll on the container that actually scrolls.
`ResizeObserver (optional)`	Keeps isMobile current when the scroll container resizes. Without it the first measurement stands.

The blur variants of Sheet and Zoom also use backdrop-filter, on by default from Firefox 103. Without it only the blur is lost: Sheet keeps its movement, scale and dimming, and Zoom keeps its movement and scale.

Routers and frameworks

SSGOI follows your framework's route lifecycle instead of replacing it, so navigation and SSR stay as they are.

Next.jstemplates/nextjs ↗

React Routertemplates/react-router ↗

TanStack Routertemplates/tanstack-router ↗SolidStarttemplates/solidstart ↗

SvelteKittemplates/sveltekit ↗

Nuxttemplates/nuxt ↗Qwik Citytemplates/qwik ↗

Router integrations other than Next.js are experimental APIs.

Router helpers are grouped under their rendering framework. Qwik keeps the key and marker on the page root; Angular offers a structural directive that recreates that root when its key changes. All templates ↗

Each stack has its own setup page in the framework guides. For how this relates to the browser's own View Transition API, see why not View Transitions.