animation skill

---
name: Animation Patterns in React
description: Building performant, accessible animations in React using Framer Motion, GSAP, React Spring, and CSS animations with best practices.
---

# Animation Patterns in React

## Overview

Creating efficient and beautiful animations is crucial for creating impressive user experiences in the digital transformation era where users expect smooth, immediate, and responsive interactions. Animations are not just decoration; they are essential for communicating system status, guiding actions, and creating emotional connections with users.

This skill covers the use of major Animation Libraries in the React ecosystem, including CSS Animations, Framer Motion, GSAP, and React Spring, with code examples and best practices for creating animations that are efficient, performant, and accessible.

## Why This Matters

- **Increases Conversion Rate**: Good animations help guide users to desired actions (Call-to-Action); studies show good animations can increase conversion rates by 15-20%
- **Reduces Bounce Rate**: Good loading animations and micro-interactions reduce the perception that the system is slow, keeping users on the website longer
- **Enhances Brand Differentiation**: Unique animations create differentiation from competitors and build strong brand recall
- **Improves User Retention**: Good animations create satisfaction in usage, making users return to use the application again
- **Reduces Support Costs**: Animations that guide usage (Onboarding Animations) can reduce questions and usage problems

---

## Core Concepts

### 1. Purpose-Driven Animation

Every animation should have a clear purpose:

- **Communicate Status**: Show loading states, success, errors
- **Guide Attention**: Draw attention to important elements or actions
- **Show Relationships**: Visual connections between related elements
- **Provide Feedback**: Immediate response to user actions
- **Create Continuity**: Smooth transitions between states

### 2. Performance Optimization

Animation should not impact application performance:

- **Use GPU-Accelerated Properties**: Transform (translate, scale, rotate), opacity
- **Avoid Layout Triggers**: Width, height, margin, padding trigger expensive recalculations
- **Reduce Paint Work**: Use transform instead of top/left
- **Limit Animations**: Don't animate everything simultaneously
- **Use Will-Change Sparingly**: Remove after animation completes

### 3. Accessibility

Animations must respect user preferences:

- **Respect Prefers-Reduced-Motion**: Disable animations for users who prefer reduced motion
- **Provide Alternatives**: Ensure content is accessible without animation
- **Control Motion**: Allow users to pause or control animations
- **Maintain Focus**: Don't move focus unexpectedly during animations
- **Provide Feedback**: Non-visual feedback for screen readers

### 4. Consistent Design Language

Animations should align with design system:

- **Standardize Duration**: 200-500ms for most transitions
- **Standardize Easing**: Use consistent easing functions
- **Create Reusable Patterns**: Build animation components and hooks
- **Match Brand Guidelines**: Animation style should reflect brand personality
- **Document Patterns**: Create animation guidelines for team

### 5. Measurable Impact

Animations should have measurable business value:

- **A/B Test**: Test animations to verify impact
- **Track Metrics**: Monitor conversion, engagement, satisfaction
- **Measure Performance**: Ensure animations don't hurt performance metrics
- **Gather Feedback**: Collect user feedback on animations
- **Iterate**: Continuously improve based on data

## Quick Start

1. **Choose Animation Library**: Select appropriate library based on requirements (Framer Motion for most cases, GSAP for complex sequences, React Spring for physics-based animations)
2. **Install Dependencies**: Install chosen library (`npm install framer-motion` or `npm install gsap`)
3. **Set Up Accessibility**: Implement `prefers-reduced-motion` check to respect user preferences
4. **Create Base Components**: Build reusable animation components for common patterns
5. **Implement Animations**: Start with simple transitions (fade, slide, scale)
6. **Test Performance**: Monitor frame rate and layout shifts during animations
7. **Test Accessibility**: Verify animations work with reduced motion preference
8. **Document Patterns**: Create guidelines for animation usage across team

```typescript
// Basic Framer Motion animation with accessibility
"use client"

import { motion } from "framer-motion"

export function AnimatedSection({ children }: { children: React.ReactNode }) {
  const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches

  return (
    <motion.div
      initial={{ opacity: 0, y: prefersReducedMotion ? 0 : 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: prefersReducedMotion ? 0 : 0.5 }}
    >
      {children}
    </motion.div>
  )
}
```

## Production Checklist

- [ ] Animation library chosen and installed
- [ ] Accessibility hooks implemented (`prefers-reduced-motion`)
- [ ] GPU-accelerated properties used (transform, opacity)
- [ ] Animation durations standardized (200-500ms)
- [ ] Easing functions consistent
- [ ] Performance metrics monitored (60 FPS target)
- [ ] Layout shift measured (CLS < 0.1)
- [ ] Bundle size optimized (<100KB gzipped)
- [ ] Memory usage tracked (avoid leaks)
- [ ] Cleanup implemented (animations stop on unmount)
- [ ] Reusable animation components created
- [ ] Documentation complete
- [ ] Cross-browser testing completed
- [ ] Mobile performance tested
- [ ] A/B testing implemented for key animations

## Anti-patterns

1. **Over-Animating**: Too many animations overwhelm users and hurt performance
2. **Ignoring Accessibility**: Not respecting `prefers-reduced-motion` causes motion sickness for some users
3. **Animating Layout Properties**: Using width, height, margin causes expensive recalculations
4. **Inconsistent Timing**: Mixed animation durations create jarring experience
5. **No Fallback**: Missing support for browsers without animation capabilities
6. **Blocking Main Thread**: Heavy animations block user interactions
7. **Not Cleaning Up**: Animations continue after component unmount causing memory leaks
8. **Using Wrong Easing**: Linear or inappropriate easing functions feel unnatural
9. **Skipping Performance Testing**: Animations work in development but fail in production
10. **No Measurable Impact**: Animations exist without business justification

## Integration Points

- **Framer Motion**: [https://www.framer.com/motion/](https://www.framer.com/motion/) - Declarative React animations
- **GSAP**: [https://greensock.com/](https://greensock.com/) - Professional animation platform
- **React Spring**: [https://www.react-spring.dev/](https://www.react-spring.dev/) - Physics-based animations
- **Performance Monitoring**: Lighthouse, WebPageTest, Chrome DevTools
- **Accessibility**: WCAG 2.1 guidelines for animations
- **Design System**: Component library for consistent animation patterns

## Further Reading

- [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)
- [Framer Motion Documentation](https://www.framer.com/motion/)
- [GSAP Documentation](https://greensock.com/docs/)
- [React Spring Documentation](https://www.react-spring.dev/)
- [Creating Usable Animations](https://www.smashingmagazine.com/2021/04/motion-on-the-web/)
- [Accessibility for Animations](https://web.dev/accessible-animation/)
- [Performance for Animations](https://web.dev/animations-guide/)