Framer Motion: A Complete Guide for React & Next.js Developers

What is Framer Motion?

Framer Motion is an open-source animation library for React that makes creating high-performance animations incredibly simple. Instead of manipulating CSS classes, writing @keyframes rules, or using imperative JavaScript to drive animations, developers describe animations declaratively as props on React components. The library takes care of interpolation, GPU acceleration, gesture handling, and lifecycle management.

The core idea is a family of motion.* components that wrap standard HTML and SVG elements — <motion.div>, <motion.button>, <motion.img>, and so on. Each motion component accepts animation props (initial, animate, exit, transition, whileHover, whileTap, drag, layout) that describe how the element should behave. A single fade-in becomes a three-line declaration:

import { motion } from "framer-motion";

export default function App() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.6 }}
    >
      Hello World
    </motion.div>
  );
}

With those few lines you have created a smooth fade-in animation. There is no useEffect, no ref, no CSS keyframes file, and no state management. This is the design pattern Framer Motion is built around, and it scales from tiny micro-interactions to full page transitions without changing shape.

Why Choose Framer Motion?

Five properties make Framer Motion the default choice for React animation in 2026:

Installation

Framer Motion is a standard npm package with no build-time configuration required. Install using your preferred package manager:

# npm
npm install framer-motion

# yarn
yarn add framer-motion

# pnpm
pnpm add framer-motion

Import motion components from `framer-motion` at the top of any file where you want to use animations. In Next.js App Router projects, files that import motion.* components must be client components — add `"use client"` at the top. This is because motion components rely on browser APIs (measuring elements, listening to gestures) that do not exist in a Node.js server-rendering context.

Core Concepts

Six props do 90% of the animation work in Framer Motion. Learn these and you can build almost any animation you need:

Practical Examples

The examples below cover the animations you will build 90% of the time in a real application:

// Fade in
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
/>

// Slide up on mount
<motion.div
  initial={{ y: 100, opacity: 0 }}
  animate={{ y: 0, opacity: 1 }}
  transition={{ duration: 0.7 }}
/>

// Scale on hover
<motion.div whileHover={{ scale: 1.1 }} />

// Continuous rotation
<motion.div
  animate={{ rotate: 360 }}
  transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
/>

// Drag with constraints
<motion.div drag dragConstraints={{ left: -100, right: 100 }} />

Every one of these examples is production-ready — drop them into any React component and they work. There is no setup step, no configuration, no CSS class management. This is what people mean when they say Framer Motion has a great developer experience: the code you write matches the animation you want.

Animating Lists with AnimatePresence

Lists that add and remove items are one of the most common places you want animation, and they are also one of the trickiest to get right. Framer Motion's <AnimatePresence> component makes this straightforward:

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

<AnimatePresence>
  {items.map((item) => (
    <motion.div
      key={item.id}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.2 }}
    >
      {item.name}
    </motion.div>
  ))}
</AnimatePresence>

AnimatePresence tracks which children are mounting and unmounting. When you filter a list, remove an item, or add a new entry, AnimatePresence keeps the removed items in the DOM long enough for their exit animation to play, then unmounts them. Without it, React unmounts removed children instantly and exit animations never fire.

Scroll-Based Animations

Landing pages, portfolios, and marketing sites benefit enormously from scroll-triggered animations — sections fading in as the user scrolls, images sliding into place, text revealing progressively. Framer Motion's `whileInView` handles the common case in one line:

<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.6 }}
>
  This slides in when 30% of it enters the viewport, and only once.
</motion.div>

The `viewport` prop controls when the animation triggers. `once: true` ensures the animation only plays the first time the element enters view (not every scroll pass). `amount: 0.3` requires 30% of the element to be visible before triggering — useful for elements taller than the viewport itself.

Variants — Reusable Animation Definitions

For anything beyond the smallest animations, you want to define the animation once and reuse it. Variants are Framer Motion's answer:

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

<motion.ul variants={container} initial="hidden" animate="visible">
  {items.map((i) => (
    <motion.li key={i.id} variants={item}>{i.name}</motion.li>
  ))}
</motion.ul>

This pattern is powerful for two reasons. First, variants are declared once and reused, keeping animation code DRY. Second, `staggerChildren` propagates animation state through the tree with a delay between siblings — the parent's transition to 'visible' triggers each child's transition to 'visible' with a 100ms stagger, producing a classic cascade effect without extra plumbing.

Integrating with Next.js

Framer Motion works seamlessly with Next.js — both the older Pages Router and the modern App Router. In the App Router, any component using motion.* imports must be marked `"use client"` because motion primitives depend on browser APIs.

Common Next.js use cases: page transitions with AnimatePresence at the layout level, animated route change indicators, hero-section entrance animations on marketing pages, animated navigation menus, card grids with staggered reveals, image gallery modals with shared-element transitions between grid and full-screen views. Server Components can render animated Client Components — the client boundary just needs to be at the animated component level.

Best Practices for Production

The difference between Framer Motion animations that feel amazing and animations that feel amateur is discipline about six practices:

• Animate transform and opacity, not layout properties — width, height, top, left force layout on every frame. transform and opacity are GPU-composited and stay smooth under load.
• Keep durations between 200-600ms for most UI interactions. Faster feels rushed and jittery; slower feels sluggish. Reserve longer animations for hero moments and page transitions.
• Use spring animations for natural movement — `transition={{ type: "spring", stiffness: 300, damping: 30 }}` feels more physical than any easing curve for interactive elements. Reserve linear/eased timing for progress bars and non-interactive animations.
• Avoid animating large numbers of DOM nodes simultaneously. Staggered animations are fine; 200 nodes all animating at once is not. If you must, disable animations on lower-end devices via the `useReducedMotion` hook.
• Respect prefers-reduced-motion — users with vestibular disorders experience nausea from motion. Framer Motion exposes `useReducedMotion()` hook; return early or use minimal animations when true.
• Reuse animation variants across the app for consistency. A design system with 5 canonical entrance animations feels more polished than 50 one-off animations with subtly different timings.

When Should You Use Framer Motion?

Framer Motion is an excellent choice for React and Next.js applications that need any of:

• SaaS dashboards with subtle state-change motion
• Business websites with polished entrance animations
• Landing pages with scroll-triggered reveals
• Portfolio websites with interactive galleries
• E-commerce stores with animated product interactions
• Marketing sites with hero animations and page transitions
• Interactive product demos and case-study pages
• Startup websites that want to feel premium from day one

It is genuinely overkill for content-heavy sites where users scroll and read (Wikipedia does not need motion), or for tools where every millisecond matters and animations get in the way of the workflow. But for anything user-facing where perceived quality matters, Framer Motion is a positive-ROI dependency.

Pros and Cons

Nothing is perfect. Where Framer Motion wins and where it doesn't:

Final Thoughts

Framer Motion has become the go-to animation library for modern React development because it strikes the perfect balance between simplicity and power. Whether you are building subtle micro-interactions on a dashboard or sophisticated page transitions on a marketing site, it helps you ship polished, delightful user experiences with minimal code. The declarative API is teachable in an afternoon; the depth of the library reveals itself as your needs grow. If you are starting a new React or Next.js project in 2026 and animations are anywhere on your feature list, Framer Motion is one of the first dependencies worth adding.

Frequently Asked Questions