Animations in React (Framer Motion, React Spring)

React - Animations and Interactions

Bringing your interfaces to life is what will make the difference between an "okay" application and a "wow" application. We'll look at the best libraries for creating smooth and performant animations in React.

Why Use an Animation Library?

Even though CSS (transitions, keyframes) is powerful, specialized JavaScript libraries offer enormous advantages:

Physics-based animations: for natural and realistic movements.
Programmatic control: start, stop, chain complex animations.
Interactivity: react to user gestures (drag, hover, etc.).
Performance: optimizations to avoid blocking the main thread.
Data animation: animate numbers, colors, positions based on the application state.

Framer Motion - Declarative Simplicity

Framer Motion is an open-source animation library for React, designed to be both simple and powerful. It allows you to create complex animations and interactions in a declarative way. It's the library that powers the incredible animations of Framer, the website builder for creative professionals.

Basic Example

import { motion } from 'framer-motion'

function Box() {
  return (
    <motion.div
      className="box"
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  )
}

React Spring - The Power of Physics

React Spring is a popular animation library that uses the principles of spring physics to create smooth and natural animations. Unlike traditional libraries that rely on keyframes and linear transitions, React Spring produces animations that respond dynamically to interactions and state changes.

Basic Example

import { useSpring, animated } from '@react-spring/web'

function Number() {
  const { number } = useSpring({
    from: { number: 0 },
    to: { number: 100 },
    config: { duration: 2000 }
  })

  return <animated.div>{number.to(n => n.toFixed(0))}</animated.div>
}

GSAP (GreenSock) - The Animation Superhero

GSAP (GreenSock Animation Platform) is an agnostic JavaScript animation library (it works with any framework). It transforms developers into animation superheroes. Build high-performance animations that work in all major browsers. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings... anything JavaScript can touch!

Example with React

import { useLayoutEffect, useRef } from 'react'
import gsap from 'gsap'

function Box() {
  const boxRef = useRef()

  useLayoutEffect(() => {
    gsap.to(boxRef.current, {
      rotation: 360,
      duration: 2,
      ease: 'bounce.out'
    })
  }, [])

  return <div ref={boxRef} className="box" />
}

Shadertoy - For Advanced Graphics Animations

Shadertoy is not a classic animation library, but a platform for creating and sharing shaders (programs that run on the graphics card) using GLSL. It's the ultimate tool for complex visual effects, generative animations, and 3D graphics that you can integrate into your React projects via libraries like react-three-fiber.

Resources for Further Learning

🎨 Framer Motion: Introduction
🔬 React Spring: Documentation
🦸 GSAP: Documentation v3
🌌 Shadertoy: Explore shaders