Animation brings interfaces to life. Thankfully, React has great open source libraries for animation. Let’s compare some popular options:

Framer Motion

Framer Motion uses declarative props for animation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { motion } from 'framer-motion';

const boxVariants = {
  hidden: { opacity: 0 },
  visible: { opacity: 1 }, 
}

function MyComponent() {
  return (
    <motion.div 
      initial="hidden"
      animate="visible"
      variants={boxVariants}
    />
  );
}

Framer Motion allows CSS, SVG, gesture, and physics animations.

React Transition Group

React Transition Group offers class-based transitions:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import { CSSTransition } from 'react-transition-group';

function MyComponent() {
  return (
    <CSSTransition
      in={isVisible}
      timeout={300}
      classNames="fade"
    >
     <div>Fades in and out</div> 
    </CSSTransition>
  );
}

Applies transition classes automatically when state changes.

React Spring

React Spring uses a physics-based approach:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { useSpring } from 'react-spring';

function MyComponent() {
  const props = useSpring({
    opacity: toggle ? 1 : 0,
    color: 'red' 
  });
  
  return <animated.div style={props}>Fades and changes color</animated.div>
}

React Spring applies animated props declaratively.

Summary

  • Framer Motion - Declarative props for CSS, SVG, gesture, physics
  • React Transition Group - Class-based enter/leave transitions
  • React Spring - Physics-based animation props

Each library brings unique strengths for animation to your React apps.