React Animation Guide: Libraries and Techniques

Published on 6 August 2023

Author: Andrew

Estimated reading time: 1 min

#React, #Javascript

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:

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:

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:

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.

Published on 6 August 2023

Filed under #React, #Javascript