What is the framer-motion skill?
The framer-motion skill in dylantarre's animation-principles repository writes all 12 Disney principles with Framer Motion's declarative React API. It supplies one JSX example per principle, timing presets of 0.15, 0.3 and 0.6 seconds plus a spring, a stagger pattern with staggerChildren 0.1, and a list of key features.
The framer-motion skill is the one in dylantarre's repository that writes Disney's 12 principles as React code. Its stagger example sets staggerChildren: 0.1 on a container so list items enter one after another.
It lives at skills/09-by-tool-framework/framer-motion and its description says to use it when implementing Disney's 12 animation principles with Framer Motion in React applications. Each principle gets a short JSX example using the motion component.
Code the skill gives for each principle
- Squash and Stretch animates
scaleXthrough 1, 1.2, 1 andscaleYthrough 1, 0.8, 1 over 0.3 seconds. - Anticipation uses idle, anticipate and jump variants with
timesof 0, 0.2 and 1. - Slow In and Slow Out sets
easeto[0.42, 0, 0.58, 1], or the named easeIn, easeOut and easeInOut. - Exaggeration uses a spring with stiffness 200 and damping 10, where low damping produces overshoot.
- Timing defines fast at 0.15, normal at 0.3, slow at 0.6 and a spring at stiffness 300 and damping 20.
- Appeal uses
whileHoverwith scale 1.02 and a box shadow.
Framer Motion features it lists
animatefor the target state andvariantsfor named animation states.whileHoverandwhileTapfor gesture animations.transitionfor timing and easing.AnimatePresencefor exit animations.useAnimationfor programmatic control andlayoutto auto-animate layout changes.
Related: GSAP with React, React view transitions and improve animations.
Who the framer-motion skill is for
Best for
- React applications that already use Framer Motion or plan to.
- Developers who want one concrete example for each of the 12 principles.
- Teams building list entrances, hover and tap feedback, or spring based emphasis.
Not for
- Sites outside React. The README lists separate skills for css-native, gsap-greensock, react-spring and lottie-bodymovin.
- Reduced motion guidance. The SKILL.md does not mention it, so check that separately.
Use it with UiChemy
Framer Motion code is front end work your agent writes in React. For WordPress, route the build through Figma, Composer, or an AI build plus MCP, then convert, and review each animation on the converted page yourself. Click Get Started on uichemy.com.
How to install Framer Motion Skill: Disney’s 12 Principles as React Code
git clone https://github.com/dylantarre/animation-principles.git ~/.claude/plugins/animation-principlesInstall as a plugin
Put
animation-principles@github:dylantarre/animation-principlesin the plugins list of your Claude Code settings, as the README shows.Install by cloning
Run the git clone command above to place the repository at
~/.claude/plugins/animation-principles, which is the README's manual route.Open the folder
The skill is at skills/09-by-tool-framework/framer-motion in the clone. The README lists it under By Tool/Framework as Framer Motion for React.
Call it by name
The README's quick start shows the form
Use animation-principles:framer-motionfor a framework skill.
Check that it loaded
Ask the agent to animate a list entrance in React. It should use variants with staggerChildren and a transition from the skill's timing presets.
Key features
- Declarative React APIImplements all 12 Disney principles using Framer Motion's declarative API, with one JSX example per principle.
- Squash and stretch keyframesAnimates scaleX and scaleY through keyframe arrays with a 0.3 second duration and even
times. - Variants for anticipationDefines idle, anticipate and jump states, then animates through two of them with uneven
timesvalues. - Reusable timing presetsProvides a timings object with fast, normal, slow and spring entries, including spring stiffness 300 and damping 20.
- Spring exaggerationShows scale 1.5 and rotate 720 with a low damping spring so the motion overshoots.
- Follow through delaysOffsets child spans by delays of 0.05 and 0.1 seconds so they trail the parent.
- Stagger childrenCombines hidden and show variants with
staggerChildren: 0.1on a motion list. - Secondary action patternPairs
whileHoverscale 1.05 andwhileTapscale 0.95 with an icon that rotates through small angles. - Key feature listNames animate, variants, whileHover, whileTap, transition, AnimatePresence, useAnimation and layout as the main tools.
Frequently asked questions
What is the framer-motion skill?
It is a skill in dylantarre's animation-principles repository that implements all 12 Disney animation principles using Framer Motion's declarative React API. Each principle has a short JSX example, followed by a stagger children pattern and a list of key features.
How do I install the framer-motion skill?
Add animation-principles@github:dylantarre/animation-principles to the plugins list in your Claude Code settings, or clone the repository into the plugins directory by hand. The skill folder in the clone is skills/09-by-tool-framework/framer-motion, one of 12 category folders.
What timing presets does the skill define?
A timings object with fast at a 0.15 second duration, normal at 0.3 and slow at 0.6, plus a spring preset with type spring, stiffness 300 and damping 20. The skill lists these under its Timing example.
How does the skill handle staggered lists?
Its Stagger Children example defines a container variant with hidden opacity 0 and a show state of opacity 1 that sets staggerChildren to 0.1. A motion list then applies initial hidden and animate show, with items using an item variant.
Does the skill cover exit animations?
It lists AnimatePresence under key Framer Motion features as the tool for exit animations, but the SKILL.md gives no full exit example. The 12 principle examples all use animate, variants, transition or gesture props.
Does the framer-motion skill work outside Claude Code?
The README presents the repository as a skill marketplace for Claude Code and does not state support for other agents. The skill is a SKILL.md file, so another tool that reads that format may load it, but that is not confirmed.
What license does the repository use?
GitHub lists dylantarre/animation-principles under the MIT license, and the README repeats it under its License heading. Check the license file in the repository again before reusing skill text inside a product.