framer-motion

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

46.2k|5.7k|Updated Mar 29, 2026
One-click install
npx skills add https://github.com/calesthio/OpenMontage --skill framer-motion-calesthio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: framer-motion
Source: https://github.com/calesthio/OpenMontage/tree/main/.agents/skills/framer-motion
Command: npx skills add https://github.com/calesthio/OpenMontage --skill framer-motion-calesthio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill translates Disney's 12 classical animation principles into concrete, reusable Framer Motion patterns so designers and developers can implement cinematic, natural-feeling motion in React components without guessing timing, easing, or choreography details.

Core Features & Use Cases

  • Patterned Examples: Practical Framer Motion approaches for squash and stretch, anticipation, staging, arcs, follow-through, slow in/out, and appeal.
  • API Mapping: Demonstrates how to use animate, variants, transition, whileHover/whileTap, AnimatePresence, useAnimation, layout, and staggered children.
  • Use Case: Apply to product UI micro-interactions, animated hero sections, component libraries, and motion design systems to create cohesive and expressive animations.

Quick Start

Use Framer Motion to implement squash and stretch, anticipation, and staggered children in a React component to prototype a cinematic micro-interaction.

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 to React UI components?▼

Use Framer Motion variants and transition properties to implement slow in/out and arcs in React. Declarative animate states and staggered children configurations translate these classical animation principles directly into component-level motion design.

What's the best way to build staggered children and spring-based physics in React animations?▼

Build staggered children and spring-based physics in React animations using Framer Motion's variants and transition configurations. This declarative approach handles gesture-driven states and component-level choreography while maintaining cohesive motion design systems.

Does Framer Motion work with React for cinematic micro-interactions and layout animations?▼

Framer Motion supports React micro-interactions through whileHover and whileTap gesture states. These declarative props trigger spring-based physics and transition configurations, enabling expressive component-level interactions without manual animation orchestration.

Can I use Framer Motion variants for staged scene choreography in React applications?▼

You can use Framer Motion variants for staged scene choreography in React applications. Variants orchestrate staggered children and timed transitions, allowing you to sequence component-level motion design across animated hero sections and product UI.

When should I not use declarative motion variants for React UI animations?▼

Avoid declarative motion variants for React UI animations when you need imperative, frame-by-frame control rather than choreographed scene transitions. Complex physics simulations outside spring-based configurations may require custom imperative animation logic.