skills.rest
TumeloRamaphosa
TumeloRamaphosaCOMMUNITY
Explore all skills by this author →
GitHub

motion-framer

Create declarative UI animations for React with Motion primitives.

Updated May 7, 2026
Search Tags:#react components#motion#framer-motion#gestures#variants#animatepresence#ui animation
One-click install
npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill motion-framer-tumeloramaphosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-framer
Source: https://github.com/TumeloRamaphosa/StudEx-Valley-OS/tree/main/.claude/skills/claudedesignskills/plugins/bundles/core-3d-animation/skills/motion-framer
Command: npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill motion-framer-tumeloramaphosa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

Motion (Framer Motion) eliminates the complexity of building smooth UI animations by providing a declarative, performant way to animate React components, interactions, and state transitions.

Core Features & Use Cases

  • Declarative Motion Components: Animate UI by wrapping elements with motion.* and driving changes via animate, initial, and exit.
  • Variants & Orchestrated State: Define reusable named animation states (e.g., hidden/visible/exit) and coordinate animations across parent/child hierarchies.
  • Gestures & Micro-Interactions: Add hover, tap, focus, and drag behaviors using whileHover, whileTap, whileFocus, and drag without imperative animation code.
  • Layout & Shared Transitions: Animate repositioning/resizing with layout, and create shared element transitions with layoutId.
  • Scroll-Triggered & Performance-Aware Animations: Reveal and animate elements as they enter the viewport using whileInView and tune transitions for responsive experiences.

Quick Start

Use the motion-framer skill to add a hover/tap animated card in your React UI by describing the interaction (scale, opacity, and optional spring timing) and where the animation should appear.

Frequently Asked Questions about motion-framer

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

FAQPage Schema
How do I animate React components when state changes without writing imperative animation code?▼

You can animate React components by wrapping them with Motion primitives and declaratively driving state transitions using the animate, initial, and exit props. This eliminates the need for imperative animation logic and handles state changes smoothly.

How do I create shared layout transitions in React when elements reposition?▼

Shared layout transitions are created using the layout and layoutId props in Framer Motion. These declarative props automatically animate element repositioning and resizing when your React component layout changes.

Can I add hover, tap, and drag gesture animations to React UI elements?▼

Yes, gesture animations are added using whileHover, whileTap, whileFocus, and drag props directly on motion components. These declarative props handle micro-interactions and gesture-based behaviors without requiring imperative event listeners.

How do I trigger scroll animations for elements entering the viewport in React?▼

Scroll-triggered reveal animations are implemented using the whileInView prop on motion components. This declaratively animates elements as they enter the viewport, allowing you to tune transitions for responsive and performant experiences.

How do I animate component exit transitions when removing elements from the DOM?▼

Component exit transitions are handled using AnimatePresence with exit semantics. Wrap your conditional components in AnimatePresence and define exit animations on motion components to animate removal from the DOM smoothly.

How do I coordinate animations across parent and child component hierarchies in React?▼

You coordinate hierarchical animations using variants, which define reusable named animation states like hidden, visible, and exit. These named states automatically propagate across parent and child motion components to orchestrate complex sequences.

Related Skills

Explore More Design & Creative Skills→
allanninalallanninal
1

vercel-react-native-skills

Apply React Native and Expo performance best practices for lists, animations, and components.

Community
Intermediate
DITEKmaxDITEKmax

animated-component-libraries

Provide pre-built animated React components for Tailwind CSS and Framer Motion.

Community
Intermediate
hii-saikrishnahii-saikrishna

motion-framer

Create interactive UI components and animations in React with Motion.

Community
Advanced
toddmoytoddmoy
1

animate

Design performant UI animations with CSS and Framer Motion.

Community
Advanced