skills.rest
leobbaroni
leobbaroniCOMMUNITY
Explore all skills by this author →
GitHub

framer-motion

Implements React UI animations with Motion including AnimatePresence, layout animations, gestures, and motion values.

1|Updated Jul 19, 2026
Search Tags:#react#animation#framer-motion#gestures#scroll#animatepresence#motion values
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill framer-motion-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: framer-motion
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/genjutsu/_jutsu/framer-motion
Command: npx skills add https://github.com/leobbaroni/maestro --skill framer-motion-leobbaroni

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires motion, and includes references (resource) components.

What problem does it solve? Building React interface animations like modals, toasts, list reordering, and shared layout transitions requires knowing the correct Motion API patterns, and common mistakes like missing keys or nested transform conflicts silently break animations. ## Core Features & Use Cases - Exit and Layout Animations: Use AnimatePresence modes and layoutId to animate component removal and shared element transitions between positions. - Gestures and Drag: Add hover, tap, focus, and constrained drag interactions declaratively with whileHover, whileTap, and drag props. - Motion Values and Scroll: Drive DOM updates without React re-renders using useMotionValue, useTransform, useSpring, and useScroll for parallax and scroll-linked effects. - Use Case: When building a swipeable card stack, use drag constraints with useTransform to map horizontal position to opacity and rotation, then trigger actions on drag end thresholds. ## Quick Start Use the framer-motion skill to add an AnimatePresence exit animation and staggered variant entrance to my React modal component.

Frequently Asked Questions about framer-motion

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

FAQPage Schema
How do I animate a component when it unmounts in React?▼

Wrap the conditional component in AnimatePresence and give the motion child a unique key plus an exit prop. Use mode="wait" to finish the exit before the next element enters, or mode="popLayout" for lists.

Framer Motion vs GSAP for React animations?▼

Framer Motion suits React UI interactions like modals, toasts, reordering, and shared layout animations with declarative props. GSAP is better for complex timelines, cinematic scroll-driven sequences, and SVG morphing.

How do I animate an element based on scroll position in React?▼

Use the useScroll hook to get scrollYProgress as a motion value, then map it with useTransform to properties like y or opacity. Pass a target ref and offset to track a specific element's position in the viewport.

Why is my AnimatePresence exit animation not working?▼

The most common cause is a missing or unstable key on the conditional motion child inside AnimatePresence. Each child needs a unique stable key so Motion can track it and trigger the exit animation on removal.

How do I update animations without causing React re-renders?▼

Use useMotionValue and pass it directly to the style prop, which updates the DOM without re-rendering. Subscribe to changes with useMotionValueEvent instead of calling setState in onUpdate callbacks.

Related Skills

Explore More Software Engineering Skills→
cfardevcfardev

motion

Animate React components with motion for enter/exit, layout, and gesture-driven transitions.

Community
Advanced
FldicoahkiinFldicoahkiin
1

animate

Identify animation opportunities for UI components across web and mobile interfaces.

Community
Advanced
mewomewoliumewomewoliu
1

motion-designer

Define motion character, timing vocabulary, and easing curves for brand-aligned UI animations.

Community
Advanced
meytalp-devmeytalp-dev

gsap-animation

Animate web UI elements with GSAP timelines, ScrollTrigger, and stagger effects.

Community
Advanced