React Animation Libraries

Add beautiful animations to React apps.

Framer Motion

Install:

npm install framer-motion

Basic animation:

import { motion } from 'framer-motion';

function Box() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
    >
      Animated Box
    </motion.div>
  );
}

Gesture animations:

<motion.button
  whileHover={{ scale: 1.1 }}
  whileTap={{ scale: 0.9 }}
>
  Click Me
</motion.button>

React Spring

Install:

npm install react-spring

Usage:

import { useSpring, animated } from 'react-spring';

function FadeIn() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });
  return <animated.div style={props}>I fade in</animated.div>;
}

Remember

• Framer Motion: Declarative, easy
• React Spring: Physics-based
• Use for better UX
• Don't overuse

Next: Learn accessibility!