Your First Animation with Framer Motion in React

Adding animation to React projects often feels harder than it should be — managing state, CSS classes, timing... Framer Motion eliminates most of this friction.

Live Spring Physics Playground

Test Framer Motion's type: "spring" physics engine live below, tweak stiffness and damping parameters, and copy the snippet:

transition: {
  type: "spring",
  stiffness: 300,
  damping: 15,
  mass: 1
}

Basic setup

npm install framer-motion

Your first animation

Replacing a standard div with motion.div gives it superpowers like initial, animate, and transition:

import { motion } from "framer-motion";

function WelcomeCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ type: "spring", stiffness: 300, damping: 20 }}
    >
      Hello there!
    </motion.div>
  );
}

This starts the component 20px lower and transparent, then gently animates it into its final position and full opacity.

Hover and tap states

whileHover and whileTap let you add interaction animations without wiring up separate state:

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Submit
</motion.button>

Enter/exit animations: AnimatePresence

If you want an element to animate out before it leaves the DOM (like a closing modal), AnimatePresence is what you need:

import { AnimatePresence, motion } from "framer-motion";

function Modal({ isOpen }: { isOpen: boolean }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          Content
        </motion.div>
      )}
    </AnimatePresence>
  );
}

AnimatePresence waits for the exit animation to finish before actually removing the element — so the modal fades out smoothly instead of vanishing abruptly.

One small piece of advice

It's tempting to animate everything. But the best animations are usually the ones nobody consciously notices. The goal isn't to dazzle — it's to make the interface feel logical and fluid.