# Make React Animations Easy Framer Motion is a production-ready motion library for React. It makes creating animations simple with a declarative API. #### Key Features - Declarative animations - Gesture support (drag, tap, hover) - Layout animations - Scroll-triggered animations - SVG animations --- ## Installation ```bash npm install framer-motion ``` **Basic Setup:** ```jsx import { motion } from "framer-motion"; function App() { return ( Animated Element ); } ``` --- ## Basic Animations ### 1. Simple Animation ```jsx import { motion } from "framer-motion"; function Box() { return ( ); } ``` ### 2. Entry Animations ```jsx function Card() { return (

Card Title

Card content goes here

); } ``` ### 3. Hover Effects ```jsx Click Me ``` --- ## Advanced Animations ### 1. Staggered Children ```jsx const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, }; const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 }, }; function List() { return ( Item 1 Item 2 Item 3 ); } ``` ### 2. Drag and Drop ```jsx ``` ### 3. Scroll Animations ```jsx import { useInView } from "framer-motion"; import { useRef } from "react"; function ScrollComponent() { const ref = useRef(null); const isInView = useInView(ref, { once: true }); return (

Content that animates when scrolled into view

); } ``` --- ## Layout Animations ### 1. Animate Layout Changes ```jsx function ToggleBox() { const [isExpanded, setIsExpanded] = useState(false); return ( setIsExpanded(!isExpanded)} > Click to Expand {isExpanded && ( Additional content that appears )} ); } ``` ### 2. Shared Layout Animations ```jsx function ImageGallery() { const [selectedId, setSelectedId] = useState(null); return ( <> {items.map((item) => ( setSelectedId(item.id)} > {item.title} {item.subtitle} ))} {selectedId && ( {/* Expanded view with same layoutId */} )} ); } ``` --- ## SVG Animations ### 1. Path Drawing ```jsx const draw = { hidden: { pathLength: 0, opacity: 0 }, visible: { pathLength: 1, opacity: 1, transition: { pathLength: { type: "spring", duration: 1.5, bounce: 0 }, opacity: { duration: 0.01 }, }, }, }; function SVGIcon() { return ( ); } ``` ### 2. Morphing SVG ```jsx const pathVariants = { hidden: { pathLength: 0 }, visible: { pathLength: 1, transition: { duration: 2 }, }, }; function AnimatedLogo() { return ( ); } ``` --- ## Gesture Animations ### 1. Hover Gestures ```jsx 🔄 ``` ### 2. Tap Gestures ```jsx Press Me ``` --- ## Page Transitions ### 1. Page Exit/Enter ```jsx const pageVariants = { initial: { opacity: 0, x: "-100vw", }, in: { opacity: 1, x: 0, }, out: { opacity: 0, x: "100vw", }, }; const pageTransition = { type: "tween", ease: "anticipate", duration: 0.5, }; function AnimatedPage({ children }) { return ( {children} ); } ``` ### 2. Router Integration (Next.js) ```jsx import { AnimatePresence } from "framer-motion"; import { useRouter } from "next/router"; function MyApp({ Component, pageProps }) { const router = useRouter(); return ( ); } ``` --- ## Performance Optimization ### 1. Use will-change ```jsx ``` ### 2. Optimize Expensive Animations ```jsx const optimizedVariants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { // Use transform properties instead of layout opacity: { duration: 0.3 }, // Use hardware acceleration x: { type: "spring", stiffness: 300, damping: 30 }, }, }, }; ``` ### 3. Reduce Motion for Accessibility ```jsx import { motion, useReducedMotion } from "framer-motion"; function AccessibleAnimation() { const shouldReduceMotion = useReducedMotion(); return ( Content ); } ``` --- ## Common Patterns ### 1. Loading Spinner ```jsx function LoadingSpinner() { return ( ); } ``` ### 2. Notification Toast ```jsx function Toast({ message, isVisible }) { return ( {isVisible && ( {message} )} ); } ``` ### 3. Accordion ```jsx function Accordion({ title, children }) { const [isOpen, setIsOpen] = useState(false); return (

setIsOpen(!isOpen)} className="w-full text-left" > {title} {isOpen && ( {children} )}

); } ``` --- ## Best Practices ### Do: - Use `initial` and `animate` for entry animations - Implement exit animations with `AnimatePresence` - Use hardware-accelerated properties (transform, opacity) - Add `transition` properties for smooth animations - Consider accessibility with `useReducedMotion` - Test animations on mobile devices ### Avoid: - Animating layout properties (margin, padding) - Too many simultaneous animations - Long duration animations that block interaction - Animations that cause content shift - Forgetting exit animations --- ## Resources **Official Documentation:** - [Framer Motion Docs](https://www.framer.com/motion/) - [API Reference](https://www.framer.com/motion/component/) - [Examples](https://www.framer.com/motion/examples/) **Community Resources:** - [Framer Motion Examples](https://github.com/framer/motion/tree/main/examples) - [Animation Recipes](https://www.framer.com/motion/recipes/) - [Showcase](https://www.framer.com/showcase/)