How to Use Framer Motion in React (and Next.js)

Framer Motion (recently renamed simply Motion) is the most popular way to add polished animation to React. It replaces fiddly CSS keyframes and manual state with a declarative API: you describe where an element starts, where it should animate to, and how. This guide gets you from install to real animations, including gestures and scroll.

Step 1: Install Framer Motion

Install the package. Whether you're in a plain React app, Vite, or Next.js, the install is the same:

npm install motion

Then import the motion component from motion/react. (Older tutorials import from 'framer-motion'; the library still works under that name, but 'motion/react' is the current import.)

import { motion } from "motion/react";

Step 2: Animate your first element

Swap a regular element for its motion equivalent (motion.div, motion.button) and pass three props: initial (starting state), animate (target state), and transition (how it moves).

import { motion } from "motion/react";

function FadeIn() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
    >
      Hello, I fade up on mount.
    </motion.div>
  );
}

That's a complete entrance animation, no keyframes, no CSS. Framer Motion animates transform and opacity under the hood, so it stays smooth.

Step 3: Add gestures (hover and tap)

Framer Motion has built-in gesture props. whileHover and whileTap animate to a state while the interaction is active, then spring back, perfect for buttons and cards.

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  className="rounded-lg bg-indigo-600 px-4 py-2 text-white"
>
  Press me
</motion.button>

Step 4: Orchestrate with variants

For anything beyond one element, use variants: named animation states you can reference by name. Their real power is staggering children, a parent variant can tell its children to animate in sequence.

const list = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1 } },
};
const item = {
  hidden: { opacity: 0, y: 16 },
  show: { opacity: 1, y: 0 },
};

<motion.ul variants={list} initial="hidden" animate="show">
  {items.map((t) => (
    <motion.li key={t} variants={item}>{t}</motion.li>
  ))}
</motion.ul>

Step 5: Animate on scroll

To animate elements as they enter the viewport, use whileInView instead of animate. It triggers when the element scrolls into view, with viewport options to control it.

<motion.section
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.6 }}
>
  I animate in when scrolled into view.
</motion.section>

Framer Motion vs GSAP: which to pick?

Both are excellent. Framer Motion feels natural in React and is fantastic for component-level animation, gestures and layout transitions. GSAP is the powerhouse for complex timelines and scroll-scrubbing (via ScrollTrigger) and works anywhere, not just React. Many projects use Framer Motion for UI and GSAP for elaborate scroll storytelling.

The short version

To use Framer Motion in React: install motion, import { motion } from 'motion/react', and animate with initial, animate and transition props. Add whileHover/whileTap for gestures, variants for orchestration, and whileInView for scroll. In Next.js, keep it inside a client component. That's everything you need for production-quality motion.

You'll find animated, production-ready components using these same ideas in the components library on this site.