← Back to list
framer-motion Checked
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
6.3Overall rating
2Views
6Downloads
56.5kStars
Installation
🤖 Install via AI
Copy the prompt below and send it to your AI assistant (e.g. Claude Code) — it will follow the instructions and install automatically.
Install the "framer-motion" skill by following the instructions at https://skill123.me/install/framer-motion.
⌨️ Command line install
Run in your terminal — downloads and installs to ~/.claude/skills/.
curl -fsSL https://skill123.me/install/framer-motion.sh | bash
📦 Download ZIP
Download the zip and extract it into your skills directory (e.g. ~/.claude/skills/), then restart your session.
⬇ Download v1.0.0 · 1 KB🛡 Dynamic test
—
Not live-tested yet — this skill is rated on static analysis only.
About this skill
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.
Documentation
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
View full documentation
animate- Target statevariants- Named animation stateswhileHover/whileTap- Gesture animationstransition- Timing and easingAnimatePresence- Exit animationsuseAnimation- Programmatic controllayout- Auto-animate layout changes
Score breakdown
Trigger
4.5
One-line description narrowly scoped to Disney principles; misses generic framer-motion or React animation triggers, no when-not.
Structure
6.7
Single 179-line file, no redundancy, but no structure beyond numbered snippets.
Workflow
3.6
Snippet catalog only: no task steps, no freedom calibration, no error handling or verification.
Content
6.0
Code fragments mostly runnable but unexplained; minimal guidance text around them.
Engineering
9.0
Valid minimal frontmatter; no referenced paths or scripts to verify.
Security
10.0
No scripts, secrets, links, or injection; purely code examples.
A bare snippet catalog mapping Disney 12 principles to Framer Motion code. Trigger description is unusually narrow, and the body is 12 code fragments with almost no explanatory prose, no workflow, no install/version guidance, and no verification or error handling.
Assessment methodology
AI-assessed
Evaluated by automated analysis across quality, usability, and security dimensions. This is not a substitute for your own review — always inspect a skill before installing it.
Version history
v1.0.0
2026-09-07
Imported from calesthio/OpenMontage@main