53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import type { Variants, Transition } from "motion/react";
|
|
|
|
export const EASE: [number, number, number, number] = [0.2, 0.8, 0.2, 1];
|
|
|
|
export const TRANSITIONS = {
|
|
fast: { duration: 0.3, ease: EASE } as Transition,
|
|
base: { duration: 0.6, ease: EASE } as Transition,
|
|
slow: { duration: 0.9, ease: EASE } as Transition,
|
|
springSoft: { type: "spring", stiffness: 120, damping: 18 } as Transition,
|
|
springFirm: { type: "spring", stiffness: 200, damping: 22 } as Transition,
|
|
};
|
|
|
|
export function fadeInUp(delay = 0, distance = 20): Variants {
|
|
return {
|
|
initial: { opacity: 0, y: distance, filter: "blur(4px)" },
|
|
animate: {
|
|
opacity: 1,
|
|
y: 0,
|
|
filter: "blur(0px)",
|
|
transition: { ...TRANSITIONS.base, delay },
|
|
},
|
|
exit: { opacity: 0, y: -distance * 0.5, transition: TRANSITIONS.fast },
|
|
};
|
|
}
|
|
|
|
export function scalePop(delay = 0): Variants {
|
|
return {
|
|
initial: { opacity: 0, scale: 0.9 },
|
|
animate: { opacity: 1, scale: 1, transition: { ...TRANSITIONS.springSoft, delay } },
|
|
exit: { opacity: 0, scale: 0.96, transition: TRANSITIONS.fast },
|
|
};
|
|
}
|
|
|
|
export function staggerContainer(stagger = 0.08, delayChildren = 0): Variants {
|
|
return {
|
|
initial: {},
|
|
animate: {
|
|
transition: {
|
|
staggerChildren: stagger,
|
|
delayChildren,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
export function blurReveal(delay = 0): Variants {
|
|
return {
|
|
initial: { opacity: 0, y: 8, filter: "blur(6px)" },
|
|
animate: { opacity: 1, y: 0, filter: "blur(0px)", transition: { ...TRANSITIONS.base, delay } },
|
|
exit: { opacity: 0, y: 8, filter: "blur(6px)", transition: TRANSITIONS.fast },
|
|
};
|
|
}
|