skills.rest
freshtechbro
freshtechbroCOMMUNITY
Explore all skills by this author →
𝕏@bishopdotunGitHub

motion-framer

Create declarative React animations with Framer Motion and Motion.

682|115|Updated Oct 25, 2025
Search Tags:#ui#react#animation#transitions#gestures#framer motion
One-click install
npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-framer
Source: https://github.com/freshtechbro/claudedesignskills/tree/main/plugins/bundles/core-3d-animation/skills/motion-framer
Command: npx skills add https://github.com/freshtechbro/claudedesignskills --skill motion-framer

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the creation of complex, performant, and interactive animations in React applications, reducing the boilerplate and cognitive load associated with animation development.

Core Features & Use Cases

  • Declarative Animations: Define animations using props like animate, initial, transition, and variants.
  • Gesture Recognition: Easily implement animations for hover, tap, drag, and focus states.
  • Layout Animations: Animate layout changes (position, size) automatically with the layout prop.
  • Exit Animations: Seamlessly animate components out of the DOM using AnimatePresence.
  • Scroll-Triggered Animations: Animate elements based on their visibility in the viewport.
  • Use Case: Build engaging UI elements like animated buttons, interactive cards with drag-and-drop functionality, smooth page transitions, and dynamic lists that animate as items are added or removed.

Quick Start

Use the motion-framer skill to create a draggable box component with spring physics.

Frequently Asked Questions about motion-framer

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

FAQPage Schema
How do I create declarative React animations without writing complex animation logic?▼

Declarative React animations are created by passing props like animate, initial, and transition directly to motion components, which reduces boilerplate and manages complex UI interactions through variants and hooks.

Can I handle hover, tap, and drag gestures in React without external gesture libraries?▼

Yes, gesture handling for hover, tap, drag, and focus states is built directly into the motion components, allowing you to define gesture-based React animations declaratively without separate gesture libraries.

How do I animate React components smoothly when they are removed from the DOM?▼

To animate components out of the DOM, wrap them in AnimatePresence, which orchestrates exit animations so your React components smoothly transition out before being unmounted from the layout.

What is the best way to animate layout changes like position and size automatically in React?▼

Automatic layout animations in React are achieved by adding the layout prop to motion components, which automatically animates changes in position and size whenever the component's layout shifts.

Do I need React to use this Framer Motion animation approach?▼

Yes, this animation approach requires integration with React components, as it leverages React's rendering lifecycle and hooks to orchestrate performant UI transitions, gestures, and scroll-based effects.

How do scroll-triggered animations work for elements entering the viewport?▼

Scroll-triggered animations track an element's visibility in the viewport and automatically trigger declarative React animations based on scroll position, creating dynamic scroll-based effects without manual scroll listeners.

Related Skills

Explore More Design & Creative Skills→
gizixgizix
2

component-patterns

Implement React compound components, render props, and composition patterns with TypeScript.

Community
Intermediate
hii-saikrishnahii-saikrishna

lottie-animations

Render After Effects animations as JSON in web and React Native apps.

Community
Intermediate
fellipeutakafellipeutaka
12

motion

Implement declarative animations in React with gestures, scroll effects, and layout transitions.

Community
Intermediate
zengxiaoqizengxiaoqi
1

css-animations

Create and manage CSS keyframe animations with controlled timing and iteration settings.

Community
Basic