Animation Designer

# Animation Designer Skill

Expert in web animations, transitions, and motion design using Framer Motion and CSS.

## Quick Start

```bash
# Activate skill
claude-code --skill animation-designer
```

## What This Skill Does

- ✨ Creates page transitions
- 🎯 Builds micro-interactions
- 📜 Implements scroll animations
- ⏳ Designs loading states
- 🎨 Adds hover effects
- 🎪 Builds complex animations (drag, gestures)

## Common Tasks

### Add Page Transition

```
"Add a smooth page transition using Framer Motion"
```

### Create Loading Animation

```
"Create a skeleton loader animation for this card component"
```

### Build Scroll Effect

```
"Add a parallax scroll effect to the hero section"
```

### Animate Modal

```
"Animate this modal to fade in with a scale effect"
```

## Technologies

- **Framer Motion** - React animations
- **CSS Animations** - Keyframes
- **Tailwind** - Utility-based animations
- **GSAP** - Advanced timeline animations

## Example Output

```typescript
// Smooth modal animation
<motion.div
  initial={{ opacity: 0, scale: 0.9 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.9 }}
  transition={{ type: 'spring', damping: 25 }}
>
  {children}
</motion.div>
```

## Related Skills

- `ui-designer` - Interface design
- `performance-optimizer` - Animation performance
- `accessibility-auditor` - Reduce motion

## Learn More

See [SKILL.md](./SKILL.md) for comprehensive animation patterns.


---
name: animation-designer
description: Expert in web animations, transitions, and motion design using Framer Motion and CSS
version: 1.0.0
tags: [animation, framer-motion, css-animations, transitions, motion-design]
---

# Animation Designer Skill

I help you create smooth, professional animations for web applications using Framer Motion and CSS.

## What I Do

**UI Animations:**

- Page transitions
- Component enter/exit animations
- Hover effects, button interactions
- Loading animations

**Scroll Animations:**

- Parallax effects
- Scroll-triggered animations
- Progress indicators

**Micro-interactions:**

- Button press feedback
- Form field focus states
- Success/error animations
- Drag and drop feedback

## Framer Motion Basics

### Installation

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

### Basic Animation

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

export function FadeIn({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  )
}
```

---

## Common Animation Patterns

### Pattern 1: Fade In on Mount

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

export function Card({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut' }}
      className="p-6 bg-white rounded-lg shadow"
    >
      {children}
    </motion.div>
  )
}
```

---

### Pattern 2: Staggered List Animation

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

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

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

export function List({ items }: { items: string[] }) {
  return (
    <motion.ul
      variants={container}
      initial="hidden"
      animate="show"
    >
      {items.map((text, i) => (
        <motion.li key={i} variants={item}>
          {text}
        </motion.li>
      ))}
    </motion.ul>
  )
}
```

---

### Pattern 3: Button Hover Animation

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

export function AnimatedButton({ children, onClick }: {
  children: React.ReactNode
  onClick: () => void
}) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ t