skills.rest
toddbadams
toddbadamsCOMMUNITY
Explore all skills by this author →
GitHub

framer-motion

Implement declarative animations, transitions, and gestures in React with Framer Motion.

Updated Aug 23, 2026
Search Tags:#web development#react#animation#transitions#gestures#framer motion
One-click install
npx skills add https://github.com/toddbadams/SBFoundation --skill framer-motion-toddbadams
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: framer-motion
Source: https://github.com/toddbadams/SBFoundation/tree/main/.claude/skills/languages/framer-motion
Command: npx skills add https://github.com/toddbadams/SBFoundation --skill framer-motion-toddbadams

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies the process of adding sophisticated animations, transitions, and gestures to React applications, enhancing user experience and visual appeal without compromising performance or accessibility.

Core Features & Use Cases

  • Declarative Animations: Define animations using simple props like initial, animate, and transition.
  • Gesture Handling: Implement interactive elements with whileHover, whileTap, and drag functionalities.
  • Layout Animations: Automatically animate changes in position and size, and enable shared element transitions.
  • Page Transitions: Create seamless transitions between different views or routes.
  • Performance & Accessibility: Built-in optimizations for smooth 60fps animations and support for prefers-reduced-motion.
  • Use Case: Add a smooth fade-in and slide-up effect to a list of items as they appear on screen, or create a parallax scrolling effect for background images.

Quick Start

Use the framer-motion skill to add a fade-in animation to a div element with a duration of 0.3 seconds.

Frequently Asked Questions about framer-motion

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

FAQPage Schema
How do I add animations to React components declaratively?▼

Declarative animations in React are added using props like `initial`, `animate`, and `transition` to define how elements change state. This approach simplifies complex UI transitions without writing imperative animation logic.

How do I handle hover and tap gestures in React applications?▼

Interactive gestures like hover and tap are handled using props such as `whileHover` and `whileTap`. These declarative props trigger specific visual state changes when users interact with UI elements.

Can I animate layout changes automatically in React?▼

Layout animations automatically animate changes in position and size. This feature enables shared element transitions, ensuring smooth visual repositioning when the DOM structure updates dynamically.

Does this React animation approach support accessibility requirements?▼

Accessibility is supported through built-in optimizations for `prefers-reduced-motion`. This ensures animations respect user system preferences, maintaining 60fps performance without causing motion sensitivity issues.

What is the best way to create seamless page transitions in a React app?▼

Seamless page transitions are created by animating changes between different views or routes. This approach provides built-in performance optimizations to ensure smooth navigation flow without visual jank.

Why use declarative animation patterns for web-only React platforms?▼

Declarative animation patterns provide built-in performance optimizations for web-only platforms, facilitating smooth 60fps animations. They simplify implementing dynamic UI elements and interactive components without compromising accessibility.

Related Skills

Explore More Software Engineering Skills→
xingBaGanxingBaGan

framer-motion

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

Community
Advanced
Insik-HanInsik-Han
16

expo-deployment

Deploy Expo apps to iOS, Android, web, and API routes via EAS.

Community
Advanced
zinohomezinohome
1

page-layout-builder

Generate page layouts and shells for common web application patterns.

Community
Intermediate
nayyirahsannayyirahsan

vercel-react-view-transitions

Implement and optimize view transitions in React and Next.js applications.

Community
Advanced