framer-motion

A simple and powerful JavaScript animation library

weekly downloads22.4M

versionv12.34.2

licenseMIT

categoryanimation

react animationreactposereact poseanimationgesturesdragspringpopmotionframerwaapi

Overview

Framer Motion is a production-grade animation library for React that treats animations as first-class components rather than imperative side effects. With over 22 million weekly downloads, it has become the de facto standard for declarative animations in the React ecosystem. The library wraps standard HTML and SVG elements with motion components that accept animation props directly in JSX, eliminating the need for separate animation logic or lifecycle management.

The library solves a fundamental problem in React development: coordinating animations with component state and the virtual DOM. Traditional animation libraries often conflict with React's rendering model, requiring manual DOM manipulation or complex useEffect hooks. Framer Motion integrates seamlessly with React's component lifecycle, automatically handling mounting, unmounting, and re-render scenarios. Its gesture system provides built-in hover, tap, drag, and focus interactions without additional event handlers.

Originally built by the Framer design tool team, the library combines a high-level declarative API with performance optimizations like GPU-accelerated transforms and tree-shakable features. Recent rebranding to "Motion" expanded its scope beyond React to include vanilla JavaScript and Vue support, though React remains its primary use case. The library includes TypeScript definitions, comprehensive test coverage, and supports both spring-based physics animations and traditional keyframe timing.

Developers building interactive UIs, micro-interactions, page transitions, or scroll-driven experiences choose Framer Motion for its balance of simplicity and power. Companies using React at scale rely on it for consistent motion design across component libraries. While it adds approximately 25kb to bundle size (reducible to under 5kb with lazy loading), its integration quality and feature completeness justify the footprint for most animation-heavy applications.

Quick Start

typescript

import { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';

function NotificationList() {
  const [notifications, setNotifications] = useState([
    { id: 1, text: 'Build completed' },
    { id: 2, text: 'Tests passed' }
  ]);

  const removeNotification = (id) => {
    setNotifications(prev => prev.filter(n => n.id !== id));
  };

  return (
    <div style={{ padding: 20 }}>
      <AnimatePresence mode="popLayout">
        {notifications.map(notification => (
          <motion.div
            key={notification.id}
            layout
            initial={{ opacity: 0, x: -100 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 100, transition: { duration: 0.2 } }}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            style={{
              padding: '16px',
              marginBottom: '8px',
              background: '#f0f0f0',
              borderRadius: '8px',
              cursor: 'pointer'
            }}
            onClick={() => removeNotification(notification.id)}
          >
            {notification.text}
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}

Use Cases

Interactive UI Components: Button press states, dropdown menus, tooltips, and modal dialogs benefit from whileHover, whileTap, and AnimatePresence for smooth enter/exit transitions without manually managing mounting states.

Page Transitions: Single-page applications use AnimatePresence with route changes to animate entire page layouts in and out, creating app-like navigation experiences with stagger effects and coordinated element animations.

Drag-and-Drop Interfaces: The drag gesture system with constraints and momentum physics enables kanban boards, sortable lists, and draggable cards with spring-based snapping and collision detection built in.

Scroll-Driven Animations: Parallax effects, progress indicators, and reveal animations trigger based on scroll position using useScroll and useTransform hooks, mapping viewport progress to opacity, scale, or position values.

Layout Animations: Responsive components that expand/collapse, reorder, or change grid layouts animate automatically with the layout prop, which morphs between states using FLIP technique for 60fps performance even on complex DOM changes.

Pros & Cons

Pros

+Declarative API integrates naturally with React's component model, avoiding imperative DOM manipulation and useEffect complexity
+Built-in gesture support (hover, tap, drag, focus) eliminates need for separate event handling libraries
+Layout animations automatically handle complex DOM changes with GPU-accelerated transforms
+AnimatePresence solves React's exit animation problem by keeping components mounted during unmount transitions
+Variants system enables consistent motion design across component trees with propagating animation states
+Strong TypeScript support with comprehensive type definitions and IntelliSense

Cons

−Bundle size starts at ~25kb gzipped, requiring LazyMotion configuration to reduce footprint for performance-sensitive apps
−Learning curve for advanced features like custom variants, useMotionValue, and transform composition
−React-specific architecture limits portability despite recent multi-framework expansion
−Performance can degrade with hundreds of simultaneously animating elements without manual optimization
−Documentation complexity increased after rebranding, with legacy examples still referencing old API patterns
−Spring animations require tuning stiffness/damping parameters which can feel unintuitive compared to duration-based timing

Alternatives

gsapv3.14.2

GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths,

animationGSAPGreenSock

1.8M / week

react-springv10.0.3

frontendanimatedanimation

838K / week

Comparisons

framer-motion vs motion

animation

framer-motion vs gsap

animation

framer-motion vs react-spring

animation

Install

bash

npm install framer-motion

bash

pnpm add framer-motion

bash

bun add framer-motion

Overview

Quick Start

typescript

import { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';

function NotificationList() {
  const [notifications, setNotifications] = useState([
    { id: 1, text: 'Build completed' },
    { id: 2, text: 'Tests passed' }
  ]);

  const removeNotification = (id) => {
    setNotifications(prev => prev.filter(n => n.id !== id));
  };

  return (
    <div style={{ padding: 20 }}>
      <AnimatePresence mode="popLayout">
        {notifications.map(notification => (
          <motion.div
            key={notification.id}
            layout
            initial={{ opacity: 0, x: -100 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: 100, transition: { duration: 0.2 } }}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            style={{
              padding: '16px',
              marginBottom: '8px',
              background: '#f0f0f0',
              borderRadius: '8px',
              cursor: 'pointer'
            }}
            onClick={() => removeNotification(notification.id)}
          >
            {notification.text}
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}

Use Cases

Pros & Cons

Pros

+Declarative API integrates naturally with React's component model, avoiding imperative DOM manipulation and useEffect complexity
+Built-in gesture support (hover, tap, drag, focus) eliminates need for separate event handling libraries
+Layout animations automatically handle complex DOM changes with GPU-accelerated transforms
+AnimatePresence solves React's exit animation problem by keeping components mounted during unmount transitions
+Variants system enables consistent motion design across component trees with propagating animation states
+Strong TypeScript support with comprehensive type definitions and IntelliSense

Cons

−Bundle size starts at ~25kb gzipped, requiring LazyMotion configuration to reduce footprint for performance-sensitive apps
−Learning curve for advanced features like custom variants, useMotionValue, and transform composition
−React-specific architecture limits portability despite recent multi-framework expansion
−Performance can degrade with hundreds of simultaneously animating elements without manual optimization
−Documentation complexity increased after rebranding, with legacy examples still referencing old API patterns
−Spring animations require tuning stiffness/damping parameters which can feel unintuitive compared to duration-based timing