# Page Transition

A Next.js App Router wrapper that plays a fade-and-slide entrance whenever the pathname changes, holding the previous content until the new route is ready.

- Category: Effects & Animation
- License: MIT
- Page: https://www.saasuji.com/components/page-transition
- Install: npx shadcn@latest add https://www.saasuji.com/r/page-transition.json

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children | `React.ReactNode` | — | Page content that fades and slides in when the route changes. |

## Source

```tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { usePathname } from "next/navigation";

export function PageTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const [displayChildren, setDisplayChildren] = useState(children);
  const [transitionState, setTransitionState] = useState<"idle" | "entering">("entering");
  const prevPath = useRef(pathname);

  useEffect(() => {
    if (prevPath.current !== pathname) {
      prevPath.current = pathname;
      setTransitionState("entering");
      setDisplayChildren(children);
      const timer = setTimeout(() => setTransitionState("idle"), 200);
      return () => clearTimeout(timer);
    } else {
      setDisplayChildren(children);
    }
  }, [pathname, children]);

  return (
    <div
      className="page-transition"
      style={{
        animation: transitionState === "entering" ? "pageEnter 0.2s ease-out forwards" : undefined,
      }}
    >
      {displayChildren}
    </div>
  );
}

```