SSGOI LogoSSGOI

Quick Start

Create your first page transition animation with SSGOI in 5 minutes

Package Installation

npm install @ssgoi/react 
# or yarn add @ssgoi/react 
# or pnpm add @ssgoi/react

Basic Setup (2 minutes)

1. Root Layout Setup (Next.js App Router)

// app/layout.tsx
import { Ssgoi } from "@ssgoi/react";
import { fade } from "@ssgoi/react/view-transitions";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        <Ssgoi config={{ defaultTransition: fade() }}>
          {/* ⚠️ Important: position: relative is required! */}
          <div style={{ position: "relative", minHeight: "100vh" }}>
            {children}
          </div>
        </Ssgoi>
      </body>
    </html>
  );
}

Why is position: relative required? When a page animates out, position: absolute is applied. Without position: relative on the parent element, pages may move to incorrect positions.

2. Page Wrapping

// app/page.tsx
import { SsgoiTransition } from "@ssgoi/react";

export default function HomePage() {
  return (
    <SsgoiTransition id="/">
      <main>
        <h1>Home Page</h1>
        {/* Page content */}
      </main>
    </SsgoiTransition>
  );
}

// app/about/page.tsx
export default function AboutPage() {
  return (
    <SsgoiTransition id="/about">
      <main>
        <h1>About Page</h1>
        {/* Page content */}
      </main>
    </SsgoiTransition>
  );
}

Applying Various Transitions

// app/layout.tsx
import { scroll, fade, drill } from "@ssgoi/react/view-transitions";

const ssgoiConfig = {
  transitions: [
    // Home → About: scroll up
    { from: "/", to: "/about", transition: scroll({ direction: "up" }) },
    // About → Home: scroll down
    { from: "/about", to: "/", transition: scroll({ direction: "down" }) },
    // List → Detail: drill (enter)
    { from: "/list", to: "/detail/*", transition: drill({ direction: "enter" }) },
  ],
};

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Ssgoi config={ssgoiConfig}>
          <div style={{ position: "relative", minHeight: "100vh" }}>
            {children}
          </div>
        </Ssgoi>
      </body>
    </html>
  );
}

Complete! 🎉

Congratulations! Your website now has native app-like page transitions applied.