Mastering Framer Motion: The Magic of Micro-interactions
Unlock the power of declarative animations. Learn how to create layout animations, gesture-based interactions, and shared element transitions.
Animation on the web used to be hard. CSS transitions are limited, and Web API animations are verbose. Enter **Framer Motion**.
Declarative Animations
Framer Motion allows you to describe *what* you want to happen, not *how*.
```jsx <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} /> ```
Layout Animations
One of the most powerful features is the `layout` prop. It automatically animates changes in layout, such as reordering a list or resizing a card, with zero calculation required from you.
Gestures
Adding hover, tap, and drag interactions is trivial:
- `whileHover={{ scale: 1.1 }}`
- `whileTap={{ scale: 0.9 }}`
- `drag`
Shared Layout Transitions
With `layoutId`, you can animate components between different parts of the tree, creating seamless morphing effects like the ones seen in the App Store or Spotify.
Framer Motion makes these high-fidelity interactions accessible to every React developer.