Motion Animation Patterns

Overview

This skill provides comprehensive guidance for implementing Motion (Framer Motion) animations in React 19 applications. It ensures consistent, performant, and accessible animations across the UI using centralized animation presets.

When to use this skill:

• Adding page transition animations
• Implementing modal/dialog entrance/exit animations
• Creating staggered list animations
• Adding hover and tap micro-interactions
• Implementing skeleton loading states
• Creating collapse/expand animations
• Building toast/notification animations

Bundled Resources:

• references/animation-presets.md - Complete preset API reference
• examples/component-patterns.md - Common animation patterns