AnimationsPage Transition

Page Transition

A GSAP-powered SVG sweep animation that runs between route changes using next-transition-router.

Installation

$ npx @nehal712521/inprogress add page-transition

Preview

Route Transition

Smooth SVG sweep between pages.

In your app this runs automatically on route changes. Here you can replay the effect inside this preview card.

Usage

// app/layout.tsx
import type { ReactNode } from "react";
import TransitionWrapper from "@/components/ui/TransitionWrapper";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <TransitionWrapper>{children}</TransitionWrapper>
      </body>
    </html>
  );
}

// Make sure you have these dependencies installed:
// npm install gsap next-transition-router