Mastering Framer Motion Animations

Framer Motion is a production-ready motion library for React that makes creating animations simple and intuitive. Let's explore how to create smooth, professional animations.

## Getting Started

Install Framer Motion:

```bash
npm install framer-motion
```

## Basic Animation

Create your first animation:

```tsx
import { motion } from 'framer-motion'

function Box() {
return (
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
Hello, World!

)
}
```

## Variants

Use variants for complex animations:

```tsx
const variants = {
hidden: { opacity: 0, x: -100 },
visible: { opacity: 1, x: 0 },
}

variants={variants}
initial="hidden"
animate="visible"
transition={{ duration: 0.5 }}
/>
```

## Gesture Animations

Add interactivity with gestures:

```tsx
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
/>
```

## Layout Animations

Animate layout changes automatically:

```tsx

{/* Content that changes */}

```

## Stagger Children

Create staggered animations:

```tsx
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
staggerChildren: 0.1
}
}
}

const item = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
}






```

## Best Practices

1. **Use `whileInView`** - Animate elements when they enter viewport
2. **Keep animations subtle** - Less is often more
3. **Consider performance** - Use `transform` and `opacity`
4. **Provide reduced motion** - Respect user preferences

## Conclusion

Framer Motion makes creating beautiful animations in React straightforward. With these techniques, you can add polish and delight to your applications.