framer-motion-interactive-animation

What this skill does

# Framer Motion Interactive Animation

## motion Component

Convert any element to animatable:

```tsx
'use client';

import { motion } from 'framer-motion';

<motion.div
  animate={{ x: 100 }}
  transition={{ duration: 0.5 }}
/>
```

**Note**: Framer Motion requires 'use client' directive in Next.js App Router.

## Gesture Animations

### Hover/Tap Effects

```tsx
<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={{ duration: 0.2 }}
  className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
>
  Click Me
</motion.button>
```

### Focus State

```tsx
<motion.input
  whileFocus={{ scale: 1.02, borderColor: 'rgb(59, 130, 246)' }}
  transition={{ duration: 0.2 }}
/>
```

## Entrance Animations

```tsx
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Fades in and slides up
</motion.div>
```

### Staggered Children

```tsx
const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1, // Delay between children
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

<motion.ul
  variants={containerVariants}
  initial="hidden"
  animate="visible"
>
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>
      {item.name}
    </motion.li>
  ))}
</motion.ul>
```

## Exit Animations

**CRITICAL**: Must wrap in `<AnimatePresence>`

```tsx
import { motion, AnimatePresence } from 'framer-motion';

function Modal({ isOpen, onClose, children }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 bg-black/50"
          onClick={onClose}
        >
          <motion.div
            initial={{ scale: 0.95, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.95, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="bg-white rounded-lg p-6"
            onClick={e => e.stopPropagation()}
          >
            {children}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
```

## Scroll-Triggered Animations

```tsx
<motion.div
  initial={{ opacity: 0, y: 50 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true }}  // Only animate once
  transition={{ duration: 0.6 }}
>
  Appears when scrolled into view
</motion.div>
```

### With Threshold

```tsx
<motion.section
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{
    once: true,
    amount: 0.3, // Trigger when 30% visible
  }}
>
  Content
</motion.section>
```

## Transition Options

### Spring (Physics-based)

```tsx
transition={{
  type: "spring",
  stiffness: 300,
  damping: 30
}}
```

### Tween (Duration-based)

```tsx
transition={{
  duration: 0.3,
  ease: "easeInOut"
}}

// Ease options: "linear", "easeIn", "easeOut", "easeInOut"
```

### Custom Easing

```tsx
transition={{
  duration: 0.5,
  ease: [0.6, -0.05, 0.01, 0.99] // Custom cubic bezier
}}
```

## Layout Animations

```tsx
<motion.div layout>
  {/* Content reflows smoothly when size changes */}
</motion.div>

// For shared element transitions
<motion.div layoutId="unique-id">
  {/* Animates between positions when layoutId matches */}
</motion.div>
```

## Performance Best Practices

**Animate** (GPU-accelerated):
- `transform` (x, y, scale, rotate)
- `opacity`

**Don't animate** (causes reflow):
- width, height
- margin, padding
- top, left, right, bottom

### Use `useReducedMotion`

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

function AnimatedCard() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
      animate={{ opacity: 1, y: 0 }}
    >
      Content
    </motion.div>
  );
}
```

## Anti-Patterns

- Forgetting `<AnimatePresence>` for exit animations
- Animating width/height instead of scale
- Missing `viewport={{ once: true }}` for scroll animations (causes re-animation)
- Using Framer Motion in Server Components

## Best Practices

- Use `viewport={{ once: true }}` for scroll animations
- Prefer transform properties over layout properties
- Wrap with AnimatePresence for exit animations
- Respect user's motion preferences with `useReducedMotion`
- Always add 'use client' directive

---

**Related Skills**: `tailwind-utility-styling`, `web-accessibility-patterns`