Loading...
Loading...
Use when adding animations, transitions, hover effects, or motion design. MANDATORY for every component. Covers Framer Motion patterns.
npx skill4agent add fusengine/agents adding-animationsTeamCreate| Feature | Description |
|---|---|
| Framer Motion | Animation library (REQUIRED) |
| Stagger | List/grid reveal patterns |
| Hover/Tap | Interactive micro-animations |
| Accessibility | prefers-reduced-motion support |
| 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 |
| 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 |
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>// Card hover
<motion.div whileHover={{ y: -4 }} transition={{ duration: 0.2 }}>
// Button hover
<motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}><motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
/>import { useReducedMotion } from "framer-motion";
const shouldReduce = useReducedMotion();
<motion.div
animate={shouldReduce ? {} : { y: 0 }}
transition={shouldReduce ? { duration: 0 } : { duration: 0.3 }}
/>// ❌ 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 }}