Best React Animation Libraries in 2026

TL;DR

Framer Motion for most React animation needs. GSAP for complex timelines and advanced sequences. The React animation library landscape in 2026 is dominated by Framer Motion (~6M weekly downloads) which covers 90% of use cases with its gesture support and layout animations. GSAP (~3M downloads) is the choice for game-like animations and complex sequences. React Spring remains popular for physics-based animations.

Key Takeaways

• Framer Motion: ~6M weekly downloads — most popular React animation library
• GSAP: ~3M downloads — most powerful for complex animations
• React Spring: ~2.5M downloads — physics-based, gesture-friendly
• Motion (formerly Framer Motion) — rebranded to motion in 2024
• All support TypeScript — no type definition issues

---

Framer Motion (motion)

import { motion, AnimatePresence } from 'framer-motion';

// Basic animation
function FadeIn({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
    >
      {children}
    </motion.div>
  );
}

// Layout animation — smooth size/position changes
function AccordionItem({ expanded, content }) {
  return (
    <motion.div layout>
      <motion.div layout="position">Header</motion.div>
      {expanded && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          exit={{ opacity: 0, height: 0 }}
        >
          {content}
        </motion.div>
      )}
    </motion.div>
  );
}

// Gesture animations
function DraggableCard() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
    >
      Drag me
    </motion.div>
  );
}

Best for: Page transitions, hover effects, modal animations, list items, gestures.

---

React Spring

import { useSpring, animated, useTransition, useChain, useSpringRef } from '@react-spring/web';

// Physics-based spring animation
function PhysicsBox() {
  const [active, setActive] = useState(false);
  const style = useSpring({
    transform: active ? 'scale(1.5)' : 'scale(1)',
    backgroundColor: active ? '#6366f1' : '#e5e7eb',
    config: { tension: 300, friction: 20 }, // Spring physics
  });

  return <animated.div style={style} onClick={() => setActive(!active)} />;
}

// List transitions — mount/unmount animations
function AnimatedList({ items }) {
  const transitions = useTransition(items, {
    from: { opacity: 0, transform: 'translateX(-20px)' },
    enter: { opacity: 1, transform: 'translateX(0px)' },
    leave: { opacity: 0, transform: 'translateX(20px)' },
    keys: item => item.id,
  });

  return transitions((style, item) => (
    <animated.div style={style}>{item.name}</animated.div>
  ));
}

Best for: Physics-based animations where spring behavior feels more natural than duration-based easing.

---

GSAP (GreenSock)

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

// Complex timeline animation
const tl = gsap.timeline({ repeat: -1, yoyo: true });
tl.to('.box', { x: 200, duration: 1 })
  .to('.box', { rotation: 360, duration: 0.5 })
  .to('.box', { scale: 1.5, opacity: 0.5, duration: 0.3 })
  .to('.box', { scale: 1, opacity: 1 });

// Scroll-triggered animation
gsap.registerPlugin(ScrollTrigger);
gsap.to('.hero-text', {
  y: -100,
  opacity: 0,
  scrollTrigger: {
    trigger: '.hero',
    start: 'top top',
    end: 'bottom top',
    scrub: true,
  },
});

Best for: Marketing pages with scroll animations, complex multi-step sequences, games.

---

Comparison Table

Library	Downloads	Bundle	Best For
Framer Motion	6M/wk	~45KB	UI animations, gestures, layout
GSAP	3M/wk	~75KB	Complex timelines, scroll
React Spring	2.5M/wk	~30KB	Physics-based animations
Auto Animate	1M/wk	~2KB	Simple list/height animations

---

When to Choose

• Framer Motion — default choice for React apps; covers 90% of needs
• GSAP — marketing sites, scroll-driven animations, complex sequences
• React Spring — when spring physics feel is specifically desired
• Auto Animate — drop-in 2KB solution for simple list animations only

---

Check animation library health scores and download trends on PkgPulse.