# Mastering Framer Motion: Creating Smooth Animations

Animations can transform a good user interface into a great one. Framer Motion makes it easy to create professional-grade animations in React applications.

## Why Framer Motion?

Framer Motion is a production-ready motion library for React that provides:

- Declarative API
- Powerful animation controls
- Gesture support
- Layout animations
- Server-side rendering support

## Basic Animation

Let's start with a simple fade-in animation:

```typescript
import { motion } from 'framer-motion';

function Component() {
return (
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
>
Hello World

);
}
```

## Variants

Variants allow you to define animation states and orchestrate animations across components:

```typescript
const variants = {
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 }
};

variants={variants}
initial="hidden"
animate="visible"
/>
```

## Stagger Animations

Create beautiful stagger effects with orchestration:

```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}

))}

```

## Gesture Animations

Add interactive animations that respond to user input:

```typescript
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.95 }}
>
Click Me

```

## Conclusion

Framer Motion is a powerful tool for creating engaging animations. Start simple and gradually incorporate more advanced techniques as you become comfortable with the API.