Framer Motion Skill

When to use

• Adding page transitions or route animations.
• Creating component enter/exit animations.
• Building gesture interactions (drag, hover, tap).
• Animating lists with stagger effects.

Guardrails

• Keep animations under 300ms for snappiness.
• Always respect prefers-reduced-motion.
• Use variants for complex, coordinated animations (not inline).
• Animate transform/opacity only (avoid layout thrash).