121 lines
2.7 KiB
JavaScript
121 lines
2.7 KiB
JavaScript
"use client";
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
// Fade in animation for sections and components
|
|
export function FadeIn({ children, delay = 0, duration = 0.5, className = "" }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration, delay }}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Slide in animation from left
|
|
export function SlideInLeft({ children, delay = 0, duration = 0.5, className = "" }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration, delay }}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Slide in animation from right
|
|
export function SlideInRight({ children, delay = 0, duration = 0.5, className = "" }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration, delay }}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Scale animation for cards and buttons
|
|
export function ScaleIn({ children, delay = 0, duration = 0.5, className = "" }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration, delay }}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Stagger children animations
|
|
export function StaggerContainer({ children, staggerDelay = 0.1, className = "" }) {
|
|
return (
|
|
<motion.div
|
|
className={className}
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={{
|
|
visible: {
|
|
transition: {
|
|
staggerChildren: staggerDelay
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Stagger child item
|
|
export function StaggerItem({ children, duration = 0.5, className = "" }) {
|
|
return (
|
|
<motion.div
|
|
variants={{
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0, transition: { duration } }
|
|
}}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Page transition component
|
|
export function PageTransition({ children }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
// Hover animation for interactive elements
|
|
export function HoverScale({ children, scale = 1.05, className = "" }) {
|
|
return (
|
|
<motion.div
|
|
whileHover={{ scale }}
|
|
transition={{ type: "spring", stiffness: 400, damping: 10 }}
|
|
className={className}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
} |