What is Framer Motion and how does it make animating React components easier?

Framer Motion is a popular animation library for React. Instead of writing complex CSS animations by hand, you use its motion components and simply describe the starting state, the ending state, and how long the change should take. Framer Motion handles all the smooth transition work for you.

import { motion } from 'framer-motion';

function FadeInBox() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello there
    </motion.div>
  );
}