majiayu000 Adding Animations (MANDATORY)
Agent Workflow (MANDATORY)
Before ANY animation work, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Find existing Framer Motion patterns
- fuse-ai-pilot:research-expert - Verify latest Framer Motion v11 API
- 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
- Every component needs animation - No static components
- Stagger on lists - Container + item variants
- Hover on interactive - Buttons, cards, links
- Respect reduced motion - useReducedMotion hook
- 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 | Framer Motion examples |
| Buttons | buttons-guide.md | Hover/press timing |
| Cards | cards-guide.md | Card hover effects |
| UI Design | ui-visual-design.md | Micro-interactions |
| Card Patterns | patterns-cards.md | Card animations |
| Button Patterns | patterns-buttons.md | Button animations |
| Navigation | patterns-navigation.md | Nav animations |
| Micro-interactions | patterns-microinteractions.md | Small details |
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)