What are the popular packages for animation?

In modern React application development, animating components smoothly requires specialized libraries that handle component mount/unmount lifecycles and GPU-accelerated transitions:

### 1. Framer Motion (Industry Standard)
The most widely used and modern animation library for React today. It provides declarative syntax, gesture support (drag, hover, tap), and layout animations:

import { motion } from 'framer-motion';

export const FadeCard = () => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.4 }}
  >
    Animated Content
  </motion.div>
);

### 2. React Spring
A physics-based animation library that models motion on real-world spring mechanics (mass, tension, friction) rather than fixed curve durations, making animations feel organic and interruptible.

### 3. GSAP (GreenSock Animation Platform)
The gold standard for high-performance complex timelines, SVG animations, and scroll-triggered choreographies (ScrollTrigger), fully compatible with React via the @gsap/react hook.

### 4. React Transition Group & React Motion (Legacy)
Historically used in earlier React versions:

• React Transition Group: Exposes lifecycle transitions (CSSTransition, TransitionGroup) to apply CSS classes as elements enter and exit the DOM.
• React Motion: An early physics-based motion library (largely superseded by React Spring and Framer Motion).