Core animation engine for SSGOI - Native app-like page transitions with spring physics
npm install @ssgoi/coreSSGOI brings native app-like page transitions to the web. Transform your static page navigations into smooth, delightful experiences that users love.
try this: ssgoi.dev
- 🌍 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, SEO-friendly
- 🎯 Use Your Router - Keep your existing routing. React Router, Next.js App Router, SvelteKit - all work seamlessly
- 💾 State Persistence - Remembers animation state during navigation, even with browser back/forward
- 🎨 Framework Agnostic - One consistent API for React, Svelte, Vue, SolidJS, and more
``bashReact
npm install @ssgoi/react
$3
#### 1. Wrap your app
`tsx
import { Ssgoi } from '@ssgoi/react';
import { fade } from '@ssgoi/react/view-transitions';export default function App() {
return (
{/ Your app /}
);
}
`#### 2. Wrap your pages
`tsx
import { SsgoiTransition } from '@ssgoi/react';export default function HomePage() {
return (
Welcome
{/ Page content /}
);
}
`That's it! Your pages now transition smoothly with a fade effect.
Advanced Transitions
$3
Define different transitions for different routes:
`tsx
const config = {
transitions: [
// Scroll between tabs
{ from: '/home', to: '/about', transition: scroll({ direction: 'up' }) },
{ from: '/about', to: '/home', transition: scroll({ direction: 'down' }) },
// Drill in when entering details
{ from: '/products', to: '/products/*', transition: drill({ direction: 'enter' }) },
// Pinterest-style image transitions
{ from: '/gallery', to: '/photo/*', transition: pinterest() }
],
defaultTransition: fade()
};
`$3
Automatically create bidirectional transitions:
`tsx
{
from: '/home',
to: '/about',
transition: scroll({ direction: 'up' }),
symmetric: true // Automatically creates reverse transition
}
`$3
Animate specific elements during mount/unmount:
`tsx
import { transition } from '@ssgoi/react';
import { fade, slide } from '@ssgoi/react/transitions';function Card() {
return (
key: 'card',
in: fade(),
out: slide({ direction: 'up' })
})}>
Animated Card
Built-in Transitions
$3
- fade - Smooth opacity transition
- scroll - Vertical scrolling (up/down)
- drill - Drill in/out effect (enter/exit)
- hero - Shared element transitions
- pinterest - Pinterest-style expand effect$3
- fade - Fade in/out
- scale - Scale in/out
- slide - Slide (direction: up/down/left/right)
- rotate - Rotate
- bounce - Bounce
- blur - Blur
- fly - Fly (custom x, y position)Framework Examples
$3
`tsx
// app/layout.tsx
import { Ssgoi } from '@ssgoi/react';
import { scroll } from '@ssgoi/react/view-transitions';export default function RootLayout({ children }) {
return (
defaultTransition: scroll({ direction: 'up' })
}}>
{children}
);
}// app/page.tsx
import { SsgoiTransition } from '@ssgoi/react';
export default function Page() {
return (
{/ Your page content /}
);
}
`$3
`svelte
`Why SSGOI?
$3
- ✅ Works in all browsers, not just Chrome
- ✅ More animation options with spring physics
- ✅ Better developer experience$3
- ✅ Built specifically for page transitions
- ✅ SSR-first design
- ✅ No router lock-in
- ✅ Minimal bundle sizeHow It Works
SSGOI intercepts DOM lifecycle events to create smooth transitions:
1. Route Change: Your router changes the URL
2. Exit Animation: Current page animates out
3. Enter Animation: New page animates in
4. State Sync: Animation state persists across navigation
All powered by a spring physics engine for natural, smooth motion.
Live Demos
Try out SSGOI with our framework-specific demo applications:
$3
`bash
pnpm react-demo:dev
Opens at http://localhost:3001
`
Explore Next.js App Router integration with various transition effects.$3
`bash
pnpm svelte-demo:dev
Opens at http://localhost:5174
`
See SvelteKit integration with smooth page transitions.Visit the
/apps` directory to explore the demo source code and learn how to implement SSGOI in your own projects.Visit https://ssgoi.dev for:
- Detailed API reference
- Interactive examples
- Framework integration guides
- Custom transition recipes
We welcome contributions! Please see our contributing guide for details.
MIT © MeurSyphus