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

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

Reference Guide

Concepts

Quick Reference

Container + Stagger

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

// 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

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

Reduced Motion

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 for complete patterns

FORBIDDEN

// ❌ 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)