playbooks

home / skills / fusengine / agents / adding-animations

adding-animations skill

/plugins/design-expert/skills/adding-animations

This skill helps you apply consistent Framer Motion animations across components, using stagger, hover, and reduced-motion patterns for accessible motion.

npx playbooks add skill fusengine/agents --skill adding-animations

Review the files below or copy the command above to add this skill to your agents.

Files (9)
SKILL.md
4.4 KB
---
name: adding-animations
description: Use when adding animations, transitions, hover effects, or motion design. MANDATORY for every component. Covers Framer Motion patterns.
versions:
  framer-motion: "11"
user-invocable: true
allowed-tools: Read, Write, Edit, Glob, Grep, Task
references: references/motion-patterns.md, references/buttons-guide.md, references/cards-guide.md, references/ui-visual-design.md, references/patterns-cards.md, references/patterns-buttons.md, references/patterns-navigation.md, references/patterns-microinteractions.md
related-skills: generating-components, interactive-states
---

# Adding Animations (MANDATORY)

## Agent Workflow (MANDATORY)

Before ANY animation work, use `TeamCreate` to spawn 3 agents:

1. **fuse-ai-pilot:explore-codebase** - Find existing Framer Motion patterns
2. **fuse-ai-pilot:research-expert** - Verify latest Framer Motion v11 API
3. Check existing animation timing conventions

After implementation, run **fuse-ai-pilot:sniper** for validation.

---

## Overview

| Feature | Description |
|---------|-------------|
| **Framer Motion** | Animation library (REQUIRED) |
| **Stagger** | List/grid reveal patterns |
| **Hover/Tap** | Interactive micro-animations |
| **Accessibility** | prefers-reduced-motion support |

---

## Critical Rules

1. **Every component needs animation** - No static components
2. **Stagger on lists** - Container + item variants
3. **Hover on interactive** - Buttons, cards, links
4. **Respect reduced motion** - useReducedMotion hook
5. **Match existing patterns** - Analyze codebase first

---

## Timing Guidelines

| Interaction | Duration | Easing |
|-------------|----------|--------|
| Hover | 50-100ms | ease-out |
| Button press | 100-150ms | ease-out |
| Modal open | 200-300ms | ease-out |
| Page transition | 300-400ms | ease-in-out |

---

## Reference Guide

### Concepts

| Topic | Reference | When to Consult |
|-------|-----------|-----------------|
| **Motion Patterns** | [motion-patterns.md](references/motion-patterns.md) | Framer Motion examples |
| **Buttons** | [buttons-guide.md](references/buttons-guide.md) | Hover/press timing |
| **Cards** | [cards-guide.md](references/cards-guide.md) | Card hover effects |
| **UI Design** | [ui-visual-design.md](references/ui-visual-design.md) | Micro-interactions |
| **Card Patterns** | [patterns-cards.md](references/patterns-cards.md) | Card animations |
| **Button Patterns** | [patterns-buttons.md](references/patterns-buttons.md) | Button animations |
| **Navigation** | [patterns-navigation.md](references/patterns-navigation.md) | Nav animations |
| **Micro-interactions** | [patterns-microinteractions.md](references/patterns-microinteractions.md) | Small details |

---

## Quick Reference

### Container + Stagger

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

<motion.div variants={container} initial="hidden" animate="show">
  <motion.div variants={item}>Item 1</motion.div>
  <motion.div variants={item}>Item 2</motion.div>
</motion.div>
```

### Hover Effects

```tsx
// Card hover
<motion.div whileHover={{ y: -4 }} transition={{ duration: 0.2 }}>

// Button hover
<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
```

### Scroll Animation

```tsx
<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, margin: "-100px" }}
/>
```

### Reduced Motion

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

const shouldReduce = useReducedMotion();
<motion.div
  animate={shouldReduce ? {} : { y: 0 }}
  transition={shouldReduce ? { duration: 0 } : { duration: 0.3 }}
/>
```

→ See [motion-patterns.md](references/motion-patterns.md) for complete patterns

---

## FORBIDDEN

```tsx
// ❌ Random bouncing loops
animate={{ y: [0, -10, 0] }}
transition={{ repeat: Infinity }}

// ❌ Excessive effects
whileHover={{ scale: 1.2, rotate: 5 }}

// ❌ Slow animations
transition={{ duration: 1.5 }}
```

---

## Best Practices

### DO
- Use container + item variants for lists
- Add hover to all interactive elements
- Respect prefers-reduced-motion
- Keep animations under 400ms
- Match existing timing patterns

### DON'T
- Create static components without animation
- Use infinite looping animations
- Make animations too slow (>400ms)
- Forget accessibility considerations
- Mix animation libraries (stick to Framer)

Overview

This skill enforces and implements motion design across UI components using Framer Motion patterns. It ensures every component receives appropriate animations, respects accessibility (prefers-reduced-motion), and aligns with existing timing conventions. Use it to add staggered reveals, hover/tap micro-interactions, page transitions, and scroll-triggered motion consistently.

How this skill works

Before changes, spawn three agents to explore the codebase for existing Framer Motion patterns, verify the current Framer Motion v11 API, and check animation timing conventions. Implement animations using container+item variants, hover/press interactions, and reduced-motion checks. After implementation, run an automated validation agent to verify patterns, timings, and accessibility compliance.

When to use it

  • When adding animations, transitions, hover effects, or scroll/entrance motion to any component (MANDATORY for every component).
  • When introducing list or grid reveals that need coordinated staggering.
  • When adding or updating interactive micro-animations for buttons, cards, links, or other controls.
  • When implementing page or modal transitions and timing must match project conventions.
  • When verifying accessibility via prefers-reduced-motion support.

Best practices

  • Always use Framer Motion as the single animation library; avoid mixing libraries.
  • Use container + item variants for lists and grids to enable staggered reveals.
  • Add hover and tap animations to interactive elements (buttons, cards, links) with short durations (50–150ms for micro-interactions).
  • Respect prefers-reduced-motion using useReducedMotion and fall back to no or minimal motion.
  • Keep most animations under 400ms and follow the project timing/easing conventions.

Example use cases

  • Reveal a dashboard list with container variants and staggerChildren for smooth sequential entrance.
  • Add subtle lift on card hover and a scale/tap interaction for buttons with whileHover/whileTap.
  • Animate modal open/close with a 200–300ms ease-out transition matching UX guidelines.
  • Implement scroll-triggered entrance for feature sections using initial / whileInView and viewport settings.
  • Validate new component animations by running the validation agent to check timing, pattern consistency, and reduced-motion support.

FAQ

Do I have to animate every element?

Yes — every component should include appropriate motion. Keep non-interactive elements subtle and use staggered patterns for lists.

How do I respect users who prefer reduced motion?

Use Framer Motion's useReducedMotion hook and provide no-motion or minimal transitions when it returns true.

What timing and easing should I use?

Follow project guidelines: hover 50–100ms (ease-out), button press 100–150ms (ease-out), modal 200–300ms (ease-out), page transitions 300–400ms (ease-in-out).