animation-patterns

# Animation Patterns Framer Motion patterns for production-quality React animations. ## Framer Motion Basics (motion components, variants) ```typescript // Install: npm install framer-motion import { motion } from 'framer-motion' // Basic motion component <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3, ease: 'easeOut' }} /> // Variants — define states, animate by name const cardVariants = { hidden: { opacity: 0, y: 20, scale: 0.98 }, visible: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.25, ease: [0.16, 1, 0.3, 1] }, }, hover: { y: -4, boxShadow: '0 12px 24px -4px rgb(0 0 0 / 0.15)', transition: { duration: 0.2 }, }, } function Card({ children }: { children: React.ReactNode }) { return ( <motion.div variants={cardVariants} initial="hidden" animate="visible" whileHover="hover" className="rounded-lg border bg-white p-4" > {children} </motion.div> ) } ``` ## Page Transitions with AnimatePresence ```typescript import { AnimatePresence, motion } from 'framer-motion' import { usePathname } from 'next/navigation' const pageVariants = { initial: { opacity: 0, x: -8 }, enter: { opacity: 1, x: 0, transition: { duration: 0.2, ease: 'easeOut' } }, exit: { opacity: 0, x: 8, transition: { duration: 0.15, ease: 'easeIn' } }, } // app/layout.tsx (Next.js App Router) export default function RootLayout({ childr...