31 lines
643 B
TypeScript
31 lines
643 B
TypeScript
import { FC, ReactNode } from "react";
|
|
import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
|
|
|
|
interface TransitionProps {
|
|
children?: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const Transition: FC<TransitionProps> = ({ children, className }) => {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
return (
|
|
<AnimatePresence>
|
|
<motion.div
|
|
className={className}
|
|
initial={{
|
|
y: 100,
|
|
opacity: 0
|
|
}}
|
|
whileInView={{
|
|
y: 0,
|
|
opacity: 1
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
};
|
|
|
|
export default Transition;
|