Framer Motion

calesthio/OpenMontage/.agents/skills/framer-motion

by calesthio9327439db69021ab4b0e2776729bf3b58fdb5a87No license65K starsListed Oct 9, 2026Updated Oct 9, 2026Repository updated 5 days ago

Use when implementing Disney's 12 animation principles with Framer Motion in React applications

Instructions onlySoftware Development Design & Creative

AI-generated overview

Reference for implementing Disney's 12 animation principles with Framer Motion in React components.

What it does: Provides code snippets showing how each of Disney's 12 animation principles maps to Framer Motion's declarative React API, covering squash and stretch, anticipation, staging, timing, exaggeration, and appeal. It also includes a stagger-children pattern and a short list of core Framer Motion features such as variants, gesture animations, AnimatePresence, and layout animation. The deliverable is instructional reference material rather than generated files.
When to use it: Use when adding or refining motion in a React application that uses Framer Motion and you want the animation to follow established principles. Also useful when choosing transitions, easing, or gesture behaviors for UI elements.
Requirements: No scripts or assets ship with the skill; it is instructions only. Applying the examples requires a React project with the Framer Motion package installed.

Framer Motion Animation Principles

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

1. Squash and Stretch

jsx

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

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

2. Anticipation

jsx

<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] }}/>

<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

jsx

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

<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

jsx

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

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

5. Follow Through and Overlapping Action

jsx

<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>

<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

jsx

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

<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

jsx

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

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

8. Secondary Action

jsx

<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>

<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

jsx

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

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

10. Exaggeration

jsx

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

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

11. Solid Drawing

jsx

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

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

12. Appeal

jsx

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

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

Stagger Children

jsx

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>

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

Source and attribution

Source:calesthio/OpenMontagein.agents/skills/framer-motionat commit9327439

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Framer Motion

Framer Motion Animation Principles

1. Squash and Stretch

2. Anticipation

3. Staging

4. Straight Ahead / Pose to Pose

5. Follow Through and Overlapping Action

6. Slow In and Slow Out

7. Arc

8. Secondary Action

9. Timing

10. Exaggeration

11. Solid Drawing

12. Appeal

Stagger Children

Key Framer Motion Features

Source and attribution

More from calesthio/OpenMontage

Web Design Guidelines

Vercel React Best Practices

Visual Style

Video Understand

Video Edit

Video Download

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices