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