Switch to version 1: remove src/lib/animations/framer-motion-wrapper.tsx
This commit is contained in:
@@ -1,57 +0,0 @@
|
|||||||
"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 (
|
|
||||||
<motion.div
|
|
||||||
variants={variants}
|
|
||||||
initial={initial}
|
|
||||||
animate={animate}
|
|
||||||
exit={exit}
|
|
||||||
transition={transition}
|
|
||||||
className={className}
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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" } },
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user