82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { createContext, useContext, useState, useEffect, useRef } from "react";
|
||
|
|
import { usePathname, useRouter } from "next/navigation";
|
||
|
|
import { PageTransition } from "@/components/ui/page-transition";
|
||
|
|
|
||
|
|
type TransitionContextType = {
|
||
|
|
startTransition: (url: string) => void;
|
||
|
|
};
|
||
|
|
const TransitionContext = createContext<TransitionContextType>({
|
||
|
|
startTransition: () => {},
|
||
|
|
});
|
||
|
|
export const usePageTransition = () => useContext(TransitionContext);
|
||
|
|
|
||
|
|
export const LayoutWithTransition = ({
|
||
|
|
children,
|
||
|
|
}: {
|
||
|
|
children: React.ReactNode;
|
||
|
|
}) => {
|
||
|
|
const [isOpen, setIsOpen] = useState(false);
|
||
|
|
const [pendingUrl, setPendingUrl] = useState<string | null>(null);
|
||
|
|
const [direction, setDirection] = useState<"reveal" | "unreveal">("unreveal");
|
||
|
|
const [pageReady, setPageReady] = useState(false);
|
||
|
|
|
||
|
|
const router = useRouter();
|
||
|
|
const pathname = usePathname();
|
||
|
|
const prevPath = useRef<string | null>(null);
|
||
|
|
|
||
|
|
/* --------------------------------------------------------------
|
||
|
|
🔹 User clicks → exit animation (reveal)
|
||
|
|
-------------------------------------------------------------- */
|
||
|
|
const startTransition = (url: string) => {
|
||
|
|
setDirection("reveal"); // going out
|
||
|
|
setPendingUrl(url);
|
||
|
|
setIsOpen(true); // start reveal animation
|
||
|
|
};
|
||
|
|
|
||
|
|
/* --------------------------------------------------------------
|
||
|
|
🔹 When GSAP reveal animation finishes → navigate
|
||
|
|
-------------------------------------------------------------- */
|
||
|
|
const handleAnimationComplete = () => {
|
||
|
|
if (pendingUrl) {
|
||
|
|
router.push(pendingUrl);
|
||
|
|
setPendingUrl(null);
|
||
|
|
setPageReady(false); // reset entry state
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
/* --------------------------------------------------------------
|
||
|
|
🔹 When route changes (new page load)
|
||
|
|
play "unreveal" after slight delay
|
||
|
|
-------------------------------------------------------------- */
|
||
|
|
useEffect(() => {
|
||
|
|
if (prevPath.current && prevPath.current !== pathname) {
|
||
|
|
// only play unreveal on navigation, not on first load
|
||
|
|
const timer = setTimeout(() => {
|
||
|
|
setDirection("unreveal");
|
||
|
|
setIsOpen(true);
|
||
|
|
setTimeout(() => setIsOpen(false), 1200); // animation duration
|
||
|
|
}, 250); // give React time to render page
|
||
|
|
return () => clearTimeout(timer);
|
||
|
|
}
|
||
|
|
prevPath.current = pathname;
|
||
|
|
}, [pathname]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TransitionContext.Provider value={{ startTransition }}>
|
||
|
|
<main className="relative min-h-screen overflow-hidden bg-white">
|
||
|
|
{/* Page content */}
|
||
|
|
<div className="relative z-10">{children}</div>
|
||
|
|
|
||
|
|
{/* Animated overlay */}
|
||
|
|
<PageTransition
|
||
|
|
isOpen={isOpen}
|
||
|
|
direction={direction}
|
||
|
|
onComplete={handleAnimationComplete}
|
||
|
|
/>
|
||
|
|
</main>
|
||
|
|
</TransitionContext.Provider>
|
||
|
|
);
|
||
|
|
};
|