React Animation Libraries

Add beautiful animations to React apps.

Framer Motion

Install: ```bash npm install framer-motion ```

Basic animation: ```javascript import { motion } from 'framer-motion';

function Box() { return ( <motion.div initial={{ opacity: 0, scale: 0.5 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.5 }} > Animated Box </motion.div> ); } ```

Gesture animations: ```javascript <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }} > Click Me </motion.button> ```

React Spring

Install: ```bash npm install react-spring ```

Usage: ```javascript import { useSpring, animated } from 'react-spring';

function FadeIn() { const props = useSpring({ opacity: 1, from: { opacity: 0 } }); return <animated.div style={props}>I fade in</animated.div>; } ```

Remember

- Framer Motion: Declarative, easy - React Spring: Physics-based - Use for better UX - Don't overuse

> Next: Learn accessibility!