awesome-react-animations - Build smooth, compositor-friendly React animations
Guides React and Next.js animation implementation, review, and fixes for smooth performance, compositor-friendly motion, and reduced-motion support.
Tags
Updated: 2026-09-28Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Keep values outside React state
- Animate transform and opacity
- Use Framer Motion primitives
- Configure reduced-motion behavior
- Choose CSS or Framer Motion
- Optimize animation bundles
- Validate rendered animation output
Inputs
- React or Next.js codebase
- Animation requirements
- Target interaction behavior
- Performance constraints
- Accessibility requirements
Outputs
- Animation implementation guidance
- React or CSS animation code
- Animation review findings
- Reduced-motion behavior
Requirements
- React or Next.js application
- Browser support for CSS animations
- Framer Motion when using its primitives