ssgoi

SSGOI brings native app-like page transitions to the web, transforming static page navigations into smooth, delightful experiences. It is designed to work seamlessly across all modern browsers and is SSR-ready for frameworks like Next.js, Nuxt, and SvelteKit.

✨ Key Features

• 🌍 Works Everywhere – Unlike the browser's View Transition API, SSGOI works in all modern browsers (Chrome, Firefox, Safari).
• 🚀 SSR Ready – Perfect compatibility with Next.js, Nuxt, SvelteKit; no hydration issues and SEO-friendly.
• 🎯 Use Your Router – Keep your existing routing (React Router, Next.js App Router, SvelteKit, etc.).
• 💾 State Persistence – Remembers animation state during navigation, even with browser back/forward.
• 🎨 Framework Agnostic – One consistent API for React, Svelte, Vue, SolidJS, and more.

Advanced Transitions

• Route-based Transitions – Define different transitions for different routes (e.g., scroll, drill, Pinterest-style).
• Symmetric Transitions – Automatically create bidirectional transitions.
• Individual Element Animations – Animate specific elements during mount/unmount.

Built-in Transitions

• Page Transitions: fade, scroll, drill, hero, pinterest.
• Element Transitions: fadeIn/fadeOut, slideUp/slideDown, scaleIn/scaleOut, bounce, blur, rotate.

How It Works

SSGOI intercepts DOM lifecycle events to create smooth transitions powered by a spring physics engine:

1. Route change via your router.
2. Exit animation for the current page.
3. Enter animation for the new page.
4. State synchronization across navigation.

Why SSGOI?

• vs View Transition API: Works in all browsers, more animation options with spring physics, better developer experience.
• vs Other Animation Libraries: Built specifically for page transitions, SSR-first design, no router lock-in, minimal bundle size.

For detailed documentation, visit https://ssgoi.dev .