54 lines
956 B
JavaScript
54 lines
956 B
JavaScript
|
|
// Framer Motion Animation Variants
|
|
|
|
export const fadeInUp = {
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: (custom = 0) => ({
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
delay: custom * 0.08,
|
|
duration: 0.6,
|
|
ease: [0.22, 1, 0.36, 1], // Custom easing
|
|
},
|
|
}),
|
|
};
|
|
|
|
export const staggerContainer = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
export const hoverScale = {
|
|
hover: {
|
|
scale: 1.03,
|
|
boxShadow: "0px 10px 20px rgba(0, 0, 0, 0.2)",
|
|
transition: { duration: 0.3 },
|
|
},
|
|
};
|
|
|
|
export const pageTransition = {
|
|
initial: { opacity: 0, x: 20 },
|
|
animate: { opacity: 1, x: 0 },
|
|
exit: { opacity: 0, x: -20 },
|
|
transition: { duration: 0.3 },
|
|
};
|
|
|
|
export const buttonTap = {
|
|
scale: 0.95,
|
|
};
|
|
|
|
export const imageFadeIn = {
|
|
hidden: { opacity: 0, scale: 1.1 },
|
|
visible: {
|
|
opacity: 1,
|
|
scale: 1,
|
|
transition: { duration: 0.5 }
|
|
},
|
|
};
|