skills.rest
Dhruv-Ghanchi
Dhruv-GhanchiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

motion-framer

Create React animations with Motion components, gestures, variants, and layout transitions.

Updated Jul 26, 2026
Search Tags:#react#animation#framer-motion#gestures#variants#spring-physics#layout-animation
One-click install
npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill motion-framer-dhruv-ghanchi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-framer
Source: https://github.com/Dhruv-Ghanchi/Portfolio-Webiste/tree/main/.agents/skills/motion-framer
Command: npx skills add https://github.com/Dhruv-Ghanchi/Portfolio-Webiste --skill motion-framer-dhruv-ghanchi

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Building smooth, production-quality animations in React requires deep knowledge of the Motion (Framer Motion) API, including gestures, exit animations, layout transitions, and spring physics, which is time-consuming to implement correctly from scratch. ## Core Features & Use Cases - Animation Patterns & Boilerplate: Generate Motion components for hover, tap, drag, exit, layout, scroll, spring, and stagger animations using the included generator scripts. - Complete API Reference: Access detailed documentation covering motion props, transitions, variants, hooks (useAnimate, useSpring, useScroll, useInView), and AnimatePresence. - Real-World Examples: Use production-ready patterns for page transitions, modals, shared element transitions, parallax scrolling, and swipe gestures. - Use Case: When building an interactive dashboard, use this Skill to add staggered list animations, draggable cards with constraints, and smooth modal enter/exit transitions without writing animation logic from scratch. ## Quick Start Ask the AI to create a draggable card component with hover and tap animations using Framer Motion.

Frequently Asked Questions about motion-framer

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

FAQPage Schema
How do I create hover and tap animations in React with Framer Motion?▼

Use the whileHover and whileTap props on any motion component, such as <motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>. Motion automatically animates to these states when the gesture starts and returns when it ends.

How to animate a component when it is removed from the React DOM?▼

Wrap the conditional component in AnimatePresence and add an exit prop to the motion component. The component must be a direct child of AnimatePresence and have a unique key prop for the exit animation to trigger.

Does Framer Motion work with Next.js and TypeScript?▼

Yes, Motion supports React 18+ frameworks including Next.js, Vite, and Remix, with full TypeScript support. You can import types like Variants, Transition, and MotionProps directly from framer-motion.

What is the difference between spring and tween transitions in Framer Motion?▼

Tween transitions are duration-based with easing curves, while spring transitions use physics parameters like stiffness, damping, and mass for natural motion. Springs are configured with type: 'spring' and optionally visualDuration and bounce.

Why is my Framer Motion exit animation not working?▼

Exit animations fail when the component is not wrapped in AnimatePresence, lacks a unique key prop, or is not a direct child of AnimatePresence. Verify all three conditions and ensure the exit prop defines the target state.

How do I make an element draggable with constraints in Framer Motion?▼

Add the drag prop to a motion component and set dragConstraints with pixel bounds or a ref to a parent element. Use whileDrag for visual feedback and dragElastic to control behavior at constraint boundaries.

Related Skills

Explore More Software Engineering Skills→
sixscripts-aisixscripts-ai

motion-framer

Create React animations with Motion components, gestures, variants, and layout transitions.

Community
Advanced
dotlab-hqdotlab-hq
1

framer-motion-animator

Animate React UI components with Framer Motion page transitions and gestures.

Official
Intermediate
freshtechbrofreshtechbro
682

web3d-integration-patterns

Provide architectural patterns for integrating Three.js, GSAP, React Three Fiber, and React Spring.

Community
Advanced
vercel-labsvercel-labs
5.8k

web-animation-design

Design web animations with easing, timing, transforms, and keyframes.

Official
Advanced