diff --git a/src/lib/animations/framer-motion-wrapper.tsx b/src/lib/animations/framer-motion-wrapper.tsx new file mode 100644 index 0000000..1f63fd7 --- /dev/null +++ b/src/lib/animations/framer-motion-wrapper.tsx @@ -0,0 +1,57 @@ +"use client"; + +import React from 'react'; +import { motion, AnimatePresence, Variants } from 'framer-motion'; + +export { motion, AnimatePresence }; +export type { Variants }; + +interface FramerMotionWrapperProps { + children: React.ReactNode; + variants?: Variants; + initial?: string | boolean; + animate?: string | boolean; + exit?: string | boolean; + transition?: object; + className?: string; + [key: string]: any; // Allows for other motion props +} + +/** + * A generic Framer Motion wrapper for animating elements. + * Provides a simple way to use `motion.div` with common animation properties. + */ +export function FramerMotionWrapper({ + children, + variants, + initial = "hidden", animate = "visible", exit = "exit", transition, + className, + ...rest +}: FramerMotionWrapperProps) { + return ( + + {children} + + ); +} + +// Example variants for common animations +export const fadeInVariants: Variants = { + hidden: { opacity: 0 }, + visible: { opacity: 1, transition: { duration: 0.8 } }, + exit: { opacity: 0, transition: { duration: 0.5 } }, +}; + +export const slideUpVariants: Variants = { + hidden: { opacity: 0, y: 50 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: "easeOut" } }, + exit: { opacity: 0, y: -50, transition: { duration: 0.4, ease: "easeIn" } }, +};