feat: add shared motion config with spring presets and variants
This commit is contained in:
67
src/lib/motion.ts
Normal file
67
src/lib/motion.ts
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import type { Transition, Variants } from "framer-motion";
|
||||||
|
|
||||||
|
// --- Spring presets ---
|
||||||
|
|
||||||
|
export const springs = {
|
||||||
|
bouncy: { type: "spring", stiffness: 400, damping: 15, mass: 0.8 } as Transition,
|
||||||
|
snappy: { type: "spring", stiffness: 500, damping: 20 } as Transition,
|
||||||
|
gentle: { type: "spring", stiffness: 200, damping: 20 } as Transition,
|
||||||
|
wobbly: { type: "spring", stiffness: 300, damping: 10 } as Transition,
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- Reusable variants ---
|
||||||
|
|
||||||
|
export const fadeSlideUp: Variants = {
|
||||||
|
hidden: { opacity: 0, y: 12 },
|
||||||
|
visible: { opacity: 1, y: 0 },
|
||||||
|
exit: { opacity: 0, y: -8 },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const fadeSlideDown: Variants = {
|
||||||
|
hidden: { opacity: 0, y: -12 },
|
||||||
|
visible: { opacity: 1, y: 0 },
|
||||||
|
exit: { opacity: 0, y: 8 },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const fadeSlideLeft: Variants = {
|
||||||
|
hidden: { opacity: 0, x: 40 },
|
||||||
|
visible: { opacity: 1, x: 0 },
|
||||||
|
exit: { opacity: 0, x: -40 },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const fadeSlideRight: Variants = {
|
||||||
|
hidden: { opacity: 0, x: -40 },
|
||||||
|
visible: { opacity: 1, x: 0 },
|
||||||
|
exit: { opacity: 0, x: 40 },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const scaleIn: Variants = {
|
||||||
|
hidden: { opacity: 0, scale: 0.9 },
|
||||||
|
visible: { opacity: 1, scale: 1 },
|
||||||
|
exit: { opacity: 0, scale: 0.95 },
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- Stagger container ---
|
||||||
|
|
||||||
|
export function staggerContainer(staggerDelay = 0.04): Variants {
|
||||||
|
return {
|
||||||
|
hidden: {},
|
||||||
|
visible: {
|
||||||
|
transition: {
|
||||||
|
staggerChildren: staggerDelay,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Micro-interaction presets ---
|
||||||
|
|
||||||
|
export const microInteraction = {
|
||||||
|
hover: { scale: 1.05 },
|
||||||
|
tap: { scale: 0.95 },
|
||||||
|
};
|
||||||
|
|
||||||
|
export const subtleHover = {
|
||||||
|
hover: { scale: 1.02 },
|
||||||
|
tap: { scale: 0.98 },
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user