34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { AnimatePresence, motion } from "framer-motion";
|
|
import { usePathname } from "next/navigation";
|
|
import React from "react";
|
|
|
|
export function PageTransitionProvider({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<AnimatePresence mode="wait">
|
|
<motion.div key={pathname}>
|
|
{children}
|
|
|
|
{/* Exit Animation Overlay */}
|
|
<motion.div
|
|
className="fixed top-0 left-0 z-50 w-full h-screen bg-white dark:bg-background origin-bottom"
|
|
initial={{ scaleY: 0 }}
|
|
animate={{ scaleY: 0 }}
|
|
exit={{ scaleY: 1 }}
|
|
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
|
|
/>
|
|
|
|
{/* Enter Animation Overlay */}
|
|
<motion.div
|
|
className="fixed top-0 left-0 z-50 w-full h-screen bg-white dark:bg-background origin-top"
|
|
initial={{ scaleY: 1 }}
|
|
animate={{ scaleY: 0 }}
|
|
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
|
|
/>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
} |