Skill

Review

Audit score 70

framer-motion

dylantarre/animation-principles

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

What is framer-motion?

A skill for applying Disney's foundational animation principles—squash and stretch, anticipation, staging, timing, and more—using Framer Motion in React. Use this when you need polished, principle-driven animations that feel natural and engaging.

Apply all 12 Disney animation principles (squash/stretch, anticipation, staging, arcs, timing, exaggeration, appeal, etc.) with Framer Motion code examples
Use variants for named animation states and gesture-driven animations (whileHover, whileTap)
Stagger child animations and control timing with easing functions and spring physics
Create follow-through and overlapping action by layering animations with staggered delays
Implement 3D transforms and perspective for solid drawing effects
Manage exit animations and programmatic animation control with AnimatePresence and useAnimation

How to install framer-motion

npx skills add https://github.com/dylantarre/animation-principles --skill framer-motion

Prerequisites

React application with Framer Motion installed (npm install framer-motion)

Claude Code

Cursor

Windsurf

Cline

How to use framer-motion

1.Import motion components from framer-motion (e.g., motion.div, motion.button)
2.Define animation variants as objects with named states (idle, hover, active, etc.)
3.Apply variants to motion components using initial, animate, and whileHover/whileTap props
4.Set transition properties (duration, ease, delay, type) to control timing and easing
5.Use staggerChildren in container variants to sequence child animations
6.Wrap components with AnimatePresence for exit animations when elements unmount

Use cases

Good for

Building interactive UI components (buttons, cards, modals) that respond to user gestures with principle-based motion
Animating sequences of elements with overlapping timing to create natural, flowing transitions
Creating character or object animations that use arcs, anticipation, and exaggeration for appeal
Designing entrance and exit animations for lists or grids using staggered child animations
Adding secondary actions (spinning icons, bouncing elements) to enhance visual feedback

Who it's for

React developers building interactive or animated user interfaces
UI/UX designers implementing motion design systems in code
Animation engineers who want to apply classical animation theory to web applications
Teams building design systems with consistent, principle-driven motion language

framer-motion FAQ

Which Disney principle should I use for a button click feedback?

Use Exaggeration (scale overshoot with low damping spring) combined with Secondary Action (icon rotation) and Timing (fast 0.15s duration) for snappy, appealing feedback.

How do I make animations feel natural rather than robotic?

Apply Slow In and Slow Out with easeInOut easing, add Anticipation before main actions, and use Arcs for movement paths instead of straight lines.

Can I animate layout changes automatically?

Yes, use the layout prop on motion components to auto-animate when DOM structure changes, combined with AnimatePresence for exit animations.

How do I control animation timing across multiple elements?

Use variants with staggerChildren in the parent container, or manually set delay values on child transitions to create overlapping action.

What's the difference between transition types?

Use duration-based transitions for precise timing, spring physics for bouncy/natural motion, and inertia for gesture-driven animations that feel responsive.

Full instructions (SKILL.md)

Source of truth, from dylantarre/animation-principles.

name: framer-motion description: Use when implementing Disney's 12 animation principles with Framer Motion in React applications

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

<motion.div animate={{ x: 200 }} transition={{ duration: 0.5 }}>
  <motion.span
    animate={{ x: 200 }}
    transition={{ duration: 0.5, delay: 0.05 }} // hair
  />
  <motion.span
    animate={{ x: 200 }}
    transition={{ duration: 0.6, delay: 0.1 }} // cape
  />
</motion.div>

6. Slow In and Slow Out

<motion.div
  animate={{ x: 300 }}
  transition={{
    duration: 0.6,
    ease: [0.42, 0, 0.58, 1] // easeInOut cubic-bezier
  }}
/>
// Or use: "easeIn", "easeOut", "easeInOut"

7. Arc

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

8. Secondary Action

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  <motion.span
    animate={{ rotate: [0, 10, -10, 0] }}
    transition={{ duration: 0.3 }}
  >
    Icon
  </motion.span>
</motion.button>

9. Timing

const timings = {
  fast: { duration: 0.15 },
  normal: { duration: 0.3 },
  slow: { duration: 0.6 },
  spring: { type: "spring", stiffness: 300, damping: 20 }
};

10. Exaggeration

<motion.div
  animate={{ scale: 1.5, rotate: 720 }}
  transition={{
    type: "spring",
    stiffness: 200,
    damping: 10 // low damping = overshoot
  }}
/>

11. Solid Drawing

<motion.div
  style={{ perspective: 1000 }}
  animate={{ rotateX: 45, rotateY: 30 }}
  transition={{ duration: 0.5 }}
/>

12. Appeal

<motion.div
  whileHover={{
    scale: 1.02,
    boxShadow: "0 20px 40px rgba(0,0,0,0.2)"
  }}
  transition={{ duration: 0.3 }}
/>

Stagger Children

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map(item => <motion.li variants={itemVariant} />)}
</motion.ul>

Key Framer Motion Features

animate - Target state
variants - Named animation states
whileHover / whileTap - Gesture animations
transition - Timing and easing
AnimatePresence - Exit animations
useAnimation - Programmatic control
layout - Auto-animate layout changes

Related skills

More from dylantarre/animation-principles and the wider catalog.

micro-interactions

dylantarre/animation-principles

Apply Disney's 12 animation principles to small UI feedback moments like buttons, toggles, and form validation.

1.4k installsAudited

mobile-touch

dylantarre/animation-principles

Apply Disney's 12 animation principles to iOS/Android gestures, haptics, and native mobile motion.

2.3k installsAudited

motion-designer

dylantarre/animation-principles

Apply Disney's 12 animation principles to design expressive, purposeful motion systems and UI animations.

1.5k installs

video-motion-graphics

dylantarre/animation-principles

Apply Disney's 12 animation principles to After Effects and Premiere Pro motion graphics.

2.0k installs

dt-alerting

dynatrace/dynatrace-for-ai

Configure Dynatrace alerting end-to-end: detectors, Grail event storage, problem grouping, and workflow notifications.

1.5k installsAudited

dt-app-dashboards

dynatrace/dynatrace-for-ai

Create, modify, and analyze Dynatrace dashboards with JSON tiles, layouts, DQL queries, and variables.

2.5k installsAudited