framer-motion

Name: framer-motion
Availability: InStock
Author: shige1014-dev

Implement Disney's 12 animation principles in React with Framer Motion.

1|Updated Apr 11, 2026

Search Tags:#react #animation #framer-motion #motion-design #ui-animation #animation-principles

Ready to run

npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill framer-motion-shige1014-dev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: framer-motion
Source: https://github.com/shige1014-dev/backup-OpenMontage/tree/main/.agents/skills/framer-motion
Command: npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill framer-motion-shige1014-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides concrete, reusable patterns for implementing Disney's 12 animation principles with Framer Motion so UI animations feel natural, expressive, and physically believable without trial-and-error tuning.

Core Features & Use Cases

Direct mappings from each of the 12 animation principles to Framer Motion idioms such as animate, variants, transition, whileHover, and AnimatePresence.
Practical examples for squash and stretch, anticipation, staging, follow-through, slow in/slow out, arcs, timing, exaggeration, and staggered children to accelerate production of polished motion.
Use Cases: creating character-like micro-interactions, cinematic UI transitions, staging hero components, choreographing multi-element entrance/exit animations, and improving perceived responsiveness in React apps.

Quick Start

Use the framer-motion skill to convert a React component into motion components that demonstrate squash and stretch, anticipation, and staggered children.

Frequently Asked Questions about framer-motion

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

FAQPage Schema

How do I apply Disney animation principles in React?▼

Squash and stretch in React UI is achieved using Framer Motion's animate and transition properties to dynamically scale component dimensions. This skill provides direct mappings from the animation principle to the corresponding Framer Motion idioms for physically believable motion.

How do I create staggered entrance and exit animations for multiple elements?▼

Anticipation in Framer Motion is implemented by sequencing a preparatory motion before the main action using variants and transition timing controls. This skill maps the anticipation principle directly to Framer Motion idioms to make micro-interactions feel expressive and intentional.

Do I need to know Framer Motion APIs to use these animation patterns?▼

Slow in and slow out animations in React are controlled using Framer Motion's transition and easing controls to manipulate timing. This skill provides concrete patterns for applying easing to achieve physically believable UI animations without manual tuning.

What is the best way to improve perceived responsiveness in React applications?▼

Staging in React UI animation is created by choreographing Framer Motion variants to direct user attention to hero components. This skill provides practical examples for staging and other Disney principles to build cinematic and polished web application transitions.

Can I use this approach for character-like micro-interactions in web apps?▼

Follow-through in Framer Motion is implemented by adding trailing motion to elements after the primary animation completes using transition and AnimatePresence. This skill maps follow-through and other Disney principles directly to Framer Motion APIs for natural component motion.

Why do my React UI animations feel unnatural and require constant tuning?▼

Timing and exaggeration in React animations are controlled using Framer Motion's transition timing and variants to emphasize specific motions. This skill provides direct mappings for these Disney principles to ensure UI animations feel expressive and physically believable.