github meursyphus/ssgoi v6.5.0
v6.5.0 — React <Activity> / Next.js cacheComponents page transitions

7 hours ago

Promotes the 6.5.0-beta line to a stable minor and publishes the entire family in lockstep:

Package 6.4.0 →
@ssgoi/core 6.5.0
@ssgoi/react 6.5.0
@ssgoi/svelte 6.5.0
@ssgoi/vue 6.5.0
@ssgoi/angular 6.5.0
@ssgoi/solid 6.5.0

All six are already published to the npm latest tag at 6.5.0.


🚀 Headline: page transitions for kept-mounted routes

Until now ssgoi could only animate a page out when its DOM node was unmounted. Modern React keeps the previous route mounted and merely hidden with display:none to preserve its state:

  • React <Activity mode="hidden"> (formerly <Offscreen>)
  • Next.js App Router with cacheComponents (PPR), which wraps each cached segment in <Activity> and keeps the prior page as a hidden sibling

In those modes nothing unmounted, so no out/in pair formed and transitions never ran. 6.5.0 makes them work — and work correctly under rapid, interrupted back-and-forth navigation. (#353)

What changed under the hood:

  • Visibility detection without feedback loops (visibility-observer.ts) — a shared MutationObserver watches each page boundary's style and fires only on React's exact hide signature display:none !important. An app's own plain display:none is never hijacked into a bogus transition, and the library's own reveal/transform writes never re-trigger it (decisions key on the display value vs a per-element accounted value).
  • Real-node reuse, no clone — the outgoing page animates out on its real DOM node, so live page state (scroll, inputs, counters) is preserved and the pose handoff (matchInto, which keys on element identity) stays continuous across interrupts. On settle the node is re-hidden and every inline style the transition leaked is wiped via a cssText snapshot.
  • Ownership-epoch reconciliation — each run stamps the nodes it drives with a monotonic epoch, so an interrupted run never clobbers the resting state owned by the run that superseded it. No page is left vanished, stuck-hidden, or non-interactive.
  • Two repeated-navigation bugs fixed — React committing the same hide twice (deduped by intent, so a real navigation is never swallowed) and Next's bfcache reordering a kept-alive <Activity> (a DOM move, which unmount-observer now distinguishes from a true unmount via isConnected).

The unmount/clone path (SPA frameworks, Next without cacheComponents) is byte-for-byte the baseline — the visibility watcher is inert unless display toggles to/from none !important.


🐞 Fixes & tuning

  • Zoom tile measurement in client space (#354) — new getClientRect() measures via getBoundingClientRect (page-relative), so a card scrolled inside an in-page transform / nested horizontal scroller is measured at its real on-screen position and the zoom tile lands on the right spot. getRect is left untouched for the page-edge transitions that rely on its transform-ignoring behavior.
  • WAAPI fill release (#354) — WebAnimation no longer keeps fill: forwards after settling. Previously, under <Activity> / cacheComponents (where the real node is preserved), the outgoing zoom tile stayed shrunk and clip/scale appeared to "not apply" from the 2nd transition onward. Now every transition renders correctly, not just the first.
  • Built-in transitions restore the outgoing node — now that hidden mode reuses the real node, every built-in transition resets the inline styles (opacity/transform, plus out-only pointer-events/z-index) it writes to from on completion, mirroring the existing to cleanup. Keeps each transition symmetric and correct on its own.
  • Axis settle thresholds loosened 10× (#350) — the axis family (x snappy/fluid, y directional/non-directional, z directional/non-directional) now sets explicit restDelta/restSpeed: 0.1. Perceived motion is unchanged; only the imperceptible sub-pixel tail past ~98% is cut, so chained navigations hand off faster.

📚 Docs

  • Per-transition detail pages with variants and live demos.
  • SEO/AEO foundation + IA redesign (showcase home, docs hub, blog), sitemap/robots.

✅ Verification

  • @ssgoi/core build + 29 unit tests passing (incl. new visibility-observer.test.ts), all packages build clean.
  • React <Activity> driven headless end-to-end: initial state, single nav both ways, state preservation, 4× rapid-interrupt stress, and interactivity after interrupts.
  • Real Next App Router + cacheComponents (docs gamja-market): outgoing page animates out on the real node and settles to a clean hidden state; repeated back/forward (bfcache reorder) keeps exactly one page visible across many cycles.
  • Published @ssgoi/react@6.5.0 correctly pins @ssgoi/core@^6.5.0 (workspace ranges resolved).

🤖 Generated with Claude Code

Don't miss a new ssgoi release

NewReleases is sending notifications on new releases.