openhands
a3b077c488
Local Build and Deploy / deploy (push) Successful in 53s
- Add framer-motion and tailwindcss-animate for transitions - Add page transitions via AnimatePresence in the site layout - Convert nav dropdown and mobile menu to animated motion components - Add entry animation to the radio player widget - Add reveal/stagger animations to the home page views - Add shared motion utilities and reusable animated components
116 lines
2.8 KiB
TypeScript
116 lines
2.8 KiB
TypeScript
import type { Variants } from "framer-motion";
|
|
|
|
export const fadeIn: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: { opacity: 1, transition: { duration: 0.4 } },
|
|
};
|
|
|
|
export const fadeInUp: Variants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0, transition: { duration: 0.4 } },
|
|
};
|
|
|
|
export const fadeInDown: Variants = {
|
|
hidden: { opacity: 0, y: -12 },
|
|
visible: { opacity: 1, y: 0, transition: { duration: 0.3 } },
|
|
};
|
|
|
|
export const fadeInLeft: Variants = {
|
|
hidden: { opacity: 0, x: -20 },
|
|
visible: { opacity: 1, x: 0, transition: { duration: 0.35 } },
|
|
};
|
|
|
|
export const fadeInRight: Variants = {
|
|
hidden: { opacity: 0, x: 20 },
|
|
visible: { opacity: 1, x: 0, transition: { duration: 0.35 } },
|
|
};
|
|
|
|
export const scaleIn: Variants = {
|
|
hidden: { opacity: 0, scale: 0.95 },
|
|
visible: { opacity: 1, scale: 1, transition: { duration: 0.25 } },
|
|
};
|
|
|
|
export const slideUp: Variants = {
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1] },
|
|
},
|
|
};
|
|
|
|
export const staggerContainer: Variants = {
|
|
hidden: {},
|
|
visible: {
|
|
transition: {
|
|
staggerChildren: 0.07,
|
|
delayChildren: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
export const staggerItem: Variants = {
|
|
hidden: { opacity: 0, y: 16 },
|
|
visible: { opacity: 1, y: 0, transition: { duration: 0.35 } },
|
|
};
|
|
|
|
export const pageTransition: Variants = {
|
|
initial: { opacity: 0, y: 8 },
|
|
enter: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.35, ease: [0.25, 0.1, 0.25, 1] },
|
|
},
|
|
exit: { opacity: 0, y: -8, transition: { duration: 0.2 } },
|
|
};
|
|
|
|
export const dropdownVariants: Variants = {
|
|
hidden: { opacity: 0, y: -6, scale: 0.97 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
scale: 1,
|
|
transition: { duration: 0.18, ease: "easeOut" },
|
|
},
|
|
exit: { opacity: 0, y: -4, scale: 0.97, transition: { duration: 0.12 } },
|
|
};
|
|
|
|
export const mobileMenuVariants: Variants = {
|
|
hidden: { opacity: 0, scale: 0.96, y: -8 },
|
|
visible: {
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
transition: { duration: 0.2, ease: "easeOut" },
|
|
},
|
|
exit: { opacity: 0, scale: 0.96, y: -6, transition: { duration: 0.15 } },
|
|
};
|
|
|
|
export const modalOverlayVariants: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: { opacity: 1, transition: { duration: 0.2 } },
|
|
exit: { opacity: 0, transition: { duration: 0.15 } },
|
|
};
|
|
|
|
export const modalContentVariants: Variants = {
|
|
hidden: { opacity: 0, scale: 0.95, y: 10 },
|
|
visible: {
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
transition: { duration: 0.25, ease: [0.25, 0.1, 0.25, 1] },
|
|
},
|
|
exit: { opacity: 0, scale: 0.95, y: 10, transition: { duration: 0.15 } },
|
|
};
|
|
|
|
export const hoverScale = {
|
|
whileHover: { scale: 1.03 },
|
|
whileTap: { scale: 0.97 },
|
|
transition: { type: "spring" as const, stiffness: 400, damping: 17 },
|
|
};
|
|
|
|
export const hoverLift = {
|
|
whileHover: { y: -3, transition: { duration: 0.2 } },
|
|
whileTap: { y: 0 },
|
|
};
|