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 copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 32
skills.sh installs: 1.8K
GitHub stars: 146
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Framer Motion Animation Principles

Implement all 12 Disney animation principles using Framer Motion's declarative React API.

1. Squash and Stretch

<motion.div
  animate={{ scaleX: [1, 1.2, 1], scaleY: [1, 0.8, 1] }}
  transition={{ duration: 0.3, times: [0, 0.5, 1] }}
/>

2. Anticipation

<motion.div
  variants={{
    idle: { y: 0, scaleY: 1 },
    anticipate: { y: 10, scaleY: 0.9 },
    jump: { y: -200 }
  }}
  initial="idle"
  animate={["anticipate", "jump"]}
  transition={{ duration: 0.5, times: [0, 0.2, 1] }}
/>

3. Staging

<motion.div animate={{ filter: "blur(3px)", opacity: 0.6 }} /> {/* bg */}
<motion.div animate={{ scale: 1.1, zIndex: 10 }} /> {/* hero */}

4. Straight Ahead / Pose to Pose

<motion.div
  animate={{
    x: [0, 100, 200, 300],
    y: [0, -50, 0, -30]
  }}
  transition={{ duration: 1, ease: "easeInOut" }}
/>

5. Follow Through and Overlapping Action

SKILL.md on GitHub

Details

Repository: github.com/dylantarre/animation-principles
Categories: Frontend Development, Design & UI/UX
First seen: Jun 3, 2026