@ssgoi/solid

Native app-like page transitions for Solid and SolidStart. Make a web app, PWA or WebView app (Capacitor, Tauri, Ionic) feel like a native app without replacing your router.

Live demos · Hero, Zoom, Film, and Sheet in motion

npm install @ssgoi/solid

Agent setup guide: https://ssgoi.dev/llms/solid.txt

Router helpers

Install this framework package once; router helpers are optional subpaths. These router helpers are experimental APIs and may change.

| Router | Import | API | | ------------ | --------------------------- | -------------------- | | Solid Router | @ssgoi/solid/solid-router | SsgoiRouteBoundary | | SolidStart | @ssgoi/solid/solidstart | SsgoiRouteBoundary |

See the framework guide for wiring and limits.

Root

Use one <Ssgoi> around file routes.

import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Ssgoi } from "@ssgoi/solid";
import { drill } from "@ssgoi/solid/view-transitions";

const config = {
  transitions: [{ on: "/posts/**", except: "/posts", transition: drill() }],
};

export default function App() {
  return (
    <Router
      root={(props) => (
        <main class="relative z-0 min-h-dvh overflow-x-clip">
          <Ssgoi config={config}>{props.children}</Ssgoi>
        </main>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Route boundary

Mark the DOM root owned by a route:

export default function Posts() {
  return <section data-ssgoi-transition="/posts">Posts</section>;
}

Use the real route path for dynamic pages:

<section data-ssgoi-transition={`/posts/${props.id}`}>...</section>

Persistent layouts

Put one marker on the persistent layout and another on its child route. SolidStart keeps the layout DOM while child routes change.

export default function ProductsLayout(props) {
  const location = useLocation();

  return (
    <section data-ssgoi-transition={location.pathname}>
      <ProductTabs />
      <div>{props.children}</div>
    </section>
  );
}

Each child route marks its own page root. Child navigation uses the child boundary; leaving the layout uses the outer boundary.

Config

import { drill, slide, zoom } from "@ssgoi/solid/view-transitions";

const config = {
  transitions: [
    {
      on: "/posts/**",
      except: "/posts",
      transition: drill(),
    },
    {
      from: "/gallery",
      to: "/gallery/*",
      transition: zoom(),
    },
    {
      ordered: ["/tabs/a", "/tabs/b"],
      transition: slide(),
    },
  ],
};

Scroll is automatic: on and from/to restore from and reset to; ordered restores both. Override with preserveScroll: { from: boolean, to: boolean }, or share one position across the rule's pages with preserveScroll: "shared".

Effect index

• fade: unrelated pages.
• drill: list → detail.
• slide or axis: ordered tabs.
• sheet: modal-like routes.
• zoom or hero: shared-element details.
• scroll: vertical sequences.

All effects: https://ssgoi.dev/llms.txt#7-transition-index

SsgoiTransition is deprecated. Use the data attribute directly.

License

MIT