skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

framer-motion

Implements Disney's 12 animation principles using Framer Motion in React applications.

Updated Jul 16, 2026
Search Tags:#react#animation#jsx#spring#framer-motion#variants#ui motion
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill framer-motion-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: framer-motion
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/framer-motion
Command: npx skills add https://github.com/X-manist/Cohmira --skill framer-motion-x-manist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires framer-motion.

What problem does it solve? Developers often struggle to translate classic animation theory into working React code, resulting in stiff or unnatural UI motion. This Skill maps each of Disney's 12 animation principles to concrete Framer Motion JSX patterns so animations can be implemented directly. ## Core Features & Use Cases - 12 Animation Principles as Code: Ready-to-use JSX snippets for squash and stretch, anticipation, staging, arcs, timing, exaggeration, and more. - Framer Motion API Coverage: Demonstrates animate, variants, whileHover, whileTap, transition, AnimatePresence, useAnimation, and layout animations. - Staggered List Animations: Shows container/child variant patterns for orchestrating multi-element motion. - Use Case: When building a React landing page, apply the anticipation and follow-through patterns to make a hero element jump animation feel physically believable. ## Quick Start Ask the AI to implement a Framer Motion animation for a React component using one of the 12 Disney animation principles, such as a spring-based button hover effect.

Frequently Asked Questions about framer-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate a React component with Framer Motion?▼

Wrap the element with motion.div and pass an animate prop describing the target state, plus a transition prop for duration and easing. Variants let you define named states and orchestrate parent-child animations.

How to create stagger animations for lists in Framer Motion?▼

Define a container variant with staggerChildren in its transition, then give each child motion element its own variant. Setting the parent to animate propagates the staggered timing to all children automatically.

Does Framer Motion support spring physics animations?▼

Yes, set transition type to spring and tune stiffness and damping values. Low damping creates overshoot effects useful for exaggeration, while higher damping produces controlled, natural motion.

How do I animate elements when they unmount in React?▼

Wrap conditional elements in AnimatePresence and add an exit prop to the motion component. Framer Motion then plays the exit animation before removing the element from the DOM.

When should I use CSS transitions instead of Framer Motion?▼

CSS transitions suffice for simple single-property hover effects without sequencing. Framer Motion is better when you need orchestration, gesture states, exit animations, layout animations, or spring physics.

Related Skills

Explore More Software Engineering Skills→
Hamza123545Hamza123545

framer-motion

Implement animations in React applications using motion components, variants, and gestures.

Community
Intermediate
treesus6treesus6
1

erne-animate

Create gesture-driven UI animations in React Native with Reanimated and Gesture Handler.

Community
Intermediate
taxmaxitaxmaxi
1

animation-accessibility

Implements reduced-motion variants for web animations using CSS, Tailwind, and Framer Motion.

Official
Intermediate
HardyLiu6HardyLiu6

gsap-timeline

Sequence GSAP animations with nested timelines, position parameters, and labels.

Community
Intermediate