skills.rest
arayaroma
arayaromaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-animation

Implements list and modal mount/unmount animations in React using Framer Motion AnimatePresence.

Updated Jul 27, 2026
Search Tags:#react#animation#modal#transitions#framer-motion#reduced-motion#animatepresence
One-click install
npx skills add https://github.com/arayaroma/ether --skill react-animation-arayaroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-animation
Source: https://github.com/arayaroma/ether/tree/main/skills/react-animation
Command: npx skills add https://github.com/arayaroma/ether --skill react-animation-arayaroma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires framer-motion.

What problem does it solve? Animating elements that enter or leave the React tree is tricky because unmounted components disappear instantly, cutting off exit transitions. This Skill provides working Framer Motion patterns for list enter/exit and modal open/close animations that handle mount/unmount correctly. ## Core Features & Use Cases - List Enter/Exit Animation: Wrap mapped items in AnimatePresence with motion.div initial/animate/exit props, using stable item ids as keys so exit animations survive reordering and mid-list removals. - Modal Transitions: Animate overlay fade and content scale/translate on open and close with a conditional AnimatePresence block. - Reduced Motion Support: Gate transitions behind prefers-reduced-motion using Framer Motion's useReducedMotion, falling back to opacity-only changes. - Use Case: When building a market list UI where cards should slide in on load and slide out on removal, apply the AnimatePresence pattern with stable keys to get correct exit animations. ## Quick Start Add Framer Motion enter and exit animations to my React list component and modal using AnimatePresence with reduced-motion support.

Frequently Asked Questions about react-animation

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

FAQPage Schema
How do I animate list items entering and leaving in React?▼

Wrap the mapped items in Framer Motion's AnimatePresence and give each item a motion.div with initial, animate, and exit props. Use the stable item id as the key, not the array index, so exit animations work when items reorder or are removed from the middle.

How to animate a modal open and close with Framer Motion?▼

Conditionally render the overlay and content inside AnimatePresence when isOpen is true. Animate the overlay's opacity and the content's opacity, scale, and y offset with matching exit values so both fade and slide out on close.

Why does my React exit animation not play when items are removed?▼

Exit animations fail when the component is not wrapped in AnimatePresence or when array indexes are used as keys. Index keys break tracking when items reorder or are removed mid-list, so always key by a stable item id.

Does Framer Motion support prefers-reduced-motion?▼

Yes, Framer Motion provides a useReducedMotion hook that returns the user's preference. When true, shrink transitions to opacity-only changes and remove transform amplitude so motion-sensitive users are not affected.

Does animating a modal make it accessible?▼

No, mount/unmount animation is separate from accessibility. A modal still needs role="dialog", aria-modal, focus move-in and restore-out, and Escape-to-close handling, which are covered by a focus management skill rather than this animation skill.

Related Skills

Explore More Software Engineering Skills→
The-Entourage-AI-DevelopmentThe-Entourage-AI-Development

framer-motion-animator

Plan and implement Framer Motion UI animations for React applications.

Official
Advanced
yahya-azeemyahya-azeem

animate

Plan and apply UI animations with accessibility and performance safeguards.

Community
Advanced
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
mauriciodelriomauriciodelrio
3

animations-and-transitions

Implement performant UI animations in React/Next.js with Framer Motion and CSS transitions.

Community
Intermediate