# Framer Motion Animations Skill Implement smooth, performant animations using Framer Motion for modern web interfaces. ## Installation & Setup ```bash npm install framer-motion ``` ```typescript \/\/ In your component 'use client'; \/\/ Required for Next.js import { motion, AnimatePresence } from 'framer-motion'; ``` ## Core Animation Patterns ### Basic Fade In ```typescript Content <\/motion.div> ``` ### Slide In from Bottom ```typescript Content <\/motion.div> ``` ### Scale In ```typescript Content <\/motion.div> ``` ### Stagger Children ```typescript const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1 } } }; const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 } }; {items.map(item => ( {item.content} <\/motion.div> ))} <\/motion.div> ``` ## Advanced Patterns ### Hover & Tap Interactions ```typescript Click Me <\/motion.button> ``` ### Layout Animations ```typescript \/\/ Automatically animates layout changes {\/* Content that changes size\/position *\/} <\/motion.div> \/\/ With spring physics ``` ### Page Transitions ```typescript \/\/ app\/layout.tsx or page wrapper {children} <\/motion.div> <\/AnimatePresence> ``` ### Scroll-Based Animations ```typescript import { useScroll, useTransform } from 'framer-motion'; function Component() { const { scrollYProgress } = useScroll(); const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]); return ( Fades out as you scroll <\/motion.div> ); } ``` ## Modal\/Dialog Animations ### Full Modal with Backdrop ```typescript {isOpen && (

{\/* Backdrop *\/} {\/* Modal *\/} Modal Content <\/motion.div> <\/div> )} <\/AnimatePresence> ``` ### Slide Up Modal (Mobile-Style) ```typescript Modal Content <\/motion.div> ``` ## List Animations ### Item Enter\/Exit ```typescript {items.map((item, index) => ( {item.content} <\/motion.div> ))} <\/AnimatePresence> ``` ### Reorder List ```typescript import { Reorder } from 'framer-motion'; {items.map(item => ( {item.content} <\/Reorder.Item> ))} <\/Reorder.Group> ``` ## Sidebar Animations ### Slide In\/Out ```typescript Sidebar Content <\/motion.aside> ``` ### With Width Animation (Not Recommended) ```typescript \/\/ ⚠️ Avoid animating width - use transform instead \/\/ Width animations can cause reflows \/\/ ✅ Better: Use scaleX or translateX ``` ## Card Animations ### Hover Card ```typescript Card Content <\/motion.div> ``` ### Loading Card Skeleton ```typescript ``` ## Button Animations ### Primary Button ```typescript Button <\/motion.button> ``` ### Icon Button ```typescript <\/motion.button> ``` ## Form Animations ### Error Message ```typescript {error && ( {error} <\/motion.div> )} <\/AnimatePresence> ``` ### Success Checkmark ```typescript <\/motion.div> ``` ## Transition Types ### Spring (Default - Natural) ```typescript transition={{ type: "spring", stiffness: 300, damping: 30 }} ``` ### Tween (Smooth Easing) ```typescript transition={{ type: "tween", duration: 0.3, ease: [0.4, 0, 0.2, 1] \/\/ Custom cubic-bezier }} ``` ### Inertia (Momentum) ```typescript transition={{ type: "inertia", velocity: 50 }} ``` ## Performance Tips ### GPU-Accelerated Properties (Fast) - `opacity` - `transform` (scale, rotate, translateX, translateY) ### Avoid Animating (Slow) - `width`, `height` - `top`, `left`, `bottom`, `right` - `padding`, `margin` ### Use Layout Prop for Size Changes ```typescript \/\/ Instead of animating width {\/* Content that changes size *\/} <\/motion.div> ``` ### Reduce Motion for Accessibility ```typescript import { useReducedMotion } from 'framer-motion'; function Component() { const shouldReduceMotion = useReducedMotion(); return ( ); } ``` ## Common Animation Variants ### Fade Up ```typescript const fadeUp = { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -20 } }; ``` ### Fade In ```typescript const fadeIn = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }; ``` ### Scale In ```typescript const scaleIn = { initial: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.9 } }; ``` ### Slide In ```typescript const slideIn = { initial: { x: -100, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: 100, opacity: 0 } }; ``` ## Testing Animations ### Check Performance ```typescript \/\/ Monitor frame rate console.log('Animation complete')} onUpdate={(latest) => console.log('Values:', latest)} \/> ``` ### Debug Layout Animations ```typescript console.log('Layout animation started')} onLayoutAnimationComplete={() => console.log('Layout animation complete')} \/> ``` ## Usage by Agent When implementing animations: 1. Choose appropriate animation type (fade, slide, scale) 2. Use spring physics for natural feel 3. Implement stagger for lists 4. Add hover\/tap interactions for buttons 5. Use AnimatePresence for mount\/unmount 6. Keep animations subtle (200-400ms) 7. Test on mobile devices 8. Respect reduced motion preferences 9. Avoid animating expensive properties 10. Use layout prop for size changes ## Common Mistakes ❌ Animating width\/height directly ❌ Too many simultaneous animations ❌ Long animation durations (>500ms) ❌ Forgetting AnimatePresence for exit animations ❌ Not using 'use client' in Next.js ✅ Animate transform properties ✅ Stagger animations for better UX ✅ Keep animations quick (200-400ms) ✅ Always wrap exit animations in AnimatePresence ✅ Mark components as 'use client'

framer-motion-animations