YepAPI/skills

Animations

Rules

• Use Framer Motion for React — motion.div with initial, animate, exit props
• AnimatePresence for mount/unmount animations — wrap conditional renders
• layout prop for automatic layout animations (reorder, resize)
• Scroll animations: useScroll() + useTransform() for parallax and scroll-triggered reveals
• Respect reduced motion: useReducedMotion() hook — disable non-essential animations
• Stagger children: variants with staggerChildren for list animations
• Performance: animate transform and opacity only — never animate width, height, margin
• Keep durations short: 200-400ms for UI transitions, 400-800ms for page transitions

Avoid

• Animating layout properties (width, height, top, left) — use transform: translate/scale
• Animations longer than 1s for UI interactions — feels sluggish
• Auto-playing animations without user trigger — disorienting
• Ignoring prefers-reduced-motion — accessibility requirement