Framer Motion

This is a practical reference for implementing Disney's 12 classic animation principles in React using Framer Motion's declarative API. You get code examples for squash and stretch, anticipation, follow through, arcs, and the rest, all using Motion's animate props, variants, and transitions. It covers the essential features like stagger children, gesture animations with whileHover and whileTap, and different timing functions including springs. If you're building UI animations and want them to feel natural instead of robotic, having these principles mapped to specific Motion patterns is genuinely helpful. The examples are concise enough to adapt quickly without wading through documentation.

Install to Claude Code

npx -y skills add dylantarre/animation-principles --skill framer-motion --agent claude-code