78 lines
3.2 KiB
TypeScript
78 lines
3.2 KiB
TypeScript
"use client";
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import "./page-transition.css";
|
|
|
|
export default function PageTransition({
|
|
children
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
const pathname = usePathname();
|
|
const [displayPath, setDisplayPath] = useState(pathname);
|
|
const [isTransitioning, setIsTransitioning] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (pathname !== displayPath) {
|
|
// Start exit animation
|
|
setIsTransitioning(true);
|
|
|
|
const exitTimer = setTimeout(() => {
|
|
// Update path (triggers content change)
|
|
setDisplayPath(pathname);
|
|
|
|
// Start enter animation
|
|
const enterTimer = setTimeout(() => {
|
|
setIsTransitioning(false);
|
|
}, 800); // Enter animation duration
|
|
|
|
return () => clearTimeout(enterTimer);
|
|
}, 800); // Exit animation duration
|
|
|
|
return () => clearTimeout(exitTimer);
|
|
}
|
|
}, [pathname, displayPath]);
|
|
|
|
return (
|
|
<>
|
|
{/* Transition overlay */}
|
|
<div className={`page-transition-overlay ${isTransitioning ? "active" : ""}`}>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 423.22 424.82"
|
|
className="transition-svg"
|
|
>
|
|
<defs>
|
|
<linearGradient id="transition-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
|
|
<stop offset="0%" stopColor="#ff0000" />
|
|
<stop offset="50%" stopColor="#ff4444" />
|
|
<stop offset="100%" stopColor="#ff0000" />
|
|
</linearGradient>
|
|
<filter id="transition-glow">
|
|
<feGaussianBlur stdDeviation="5" result="coloredBlur"/>
|
|
<feMerge>
|
|
<feMergeNode in="coloredBlur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
<g>
|
|
<polygon
|
|
className="transition-path"
|
|
points="352.86 365.08 347.11 365.08 347.11 381 289.38 381 289.38 365.08 283.63 365.08 283.63 381 204.78 381 204.78 365.08 199.03 365.08 199.03 381 141.32 381 141.32 365.08 135.57 365.08 135.57 381 77.87 381 77.87 365.08 71.86 365.08 71.85 381 17.21 381 17.21 386.74 72.11 386.74 72.11 424.82 74.04 424.82 74.04 386.74 350.94 386.74 350.94 424.82 352.86 424.82 352.86 386.74 406.02 386.74 406.02 381 352.86 381 352.86 365.08"
|
|
/>
|
|
<path
|
|
className="transition-path"
|
|
d="m72.11,157.74v73.55l-41.42,23.89h3.83l37.58-21.68-.04,21.68h5.79v-24.99l57.7-33.27v58.26h5.75v-57.15l57.71-33.29v90.44h5.75v-90.43l39.43,22.77,39.43,22.77v44.89h5.74v-41.58l57.73,33.32v8.25h5.75v-95.41h-1.92v82.75l-61.56-35.55v-98.77l59.59-34.35-.97-1.66-58.62,33.81V0h-1.92v42.86h-88.43v115.23l-5.2,3-14.21,8.16-27.25,15.74-11.05,6.37v-73.53l36.14-20.85-.96-1.66-35.19,20.29v-35.03h-1.92v36.13l-65.36,37.7v-37.25h-1.92v38.35l-53.08,30.6.96,1.67,52.12-30.07ZM204.78,48.58h78.85v60.71l-78.85,45.48V48.58Zm0,108.41l78.85-45.49v92.14l-78.85-45.54v-1.11Zm-126.91,1.92l57.7-33.32v69.11l-57.7,33.26v-69.05Z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Page content */}
|
|
<div className={`page-content ${isTransitioning ? "transitioning" : ""}`}>
|
|
{children}
|
|
</div>
|
|
</>
|
|
);
|
|
} |