22 lines
583 B
React
22 lines
583 B
React
|
import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
|
||
|
|
|
||
|
|
export default function PageTransition({ children, routeKey }) {
|
||
|
|
const reduceMotion = useReducedMotion();
|
||
|
|
|
||
|
|
if (reduceMotion) return children;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AnimatePresence mode="wait" initial={false}>
|
||
|
|
<motion.div
|
||
|
|
key={routeKey}
|
||
|
|
initial={{ opacity: 0, y: 8 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
exit={{ opacity: 0, y: -6 }}
|
||
|
|
transition={{ duration: 0.18, ease: [0.22, 1, 0.36, 1] }}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
</AnimatePresence>
|
||
|
|
);
|
||
|
|
}
|