framer-motion

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.

framer-motion

React

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.

npm GitHub Docs

Fit

Bundle (gzip)

62.1 kB

184.1 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Animating elements in React typically means juggling CSS transitions, keyframes, and refs manually. Coordinating entrance/exit animations, drag interactions, and layout shifts across components is brittle and hard to maintain.

What It Does

Framer Motion wraps any React element in a motion component that accepts animation props directly. It handles enter/exit animations, drag-and-drop, scroll-linked effects, and shared layout transitions — all declaratively without touching CSS or imperative DOM APIs.

Installation

bash

npm install framer-motion

Usage Example

jsx

import { motion } from 'framer-motion';

export function Card() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      whileHover={{ scale: 1.05 }}
      transition={{ duration: 0.3 }}
      className="card"
    >
      Hello, world!
    </motion.div>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

input-otpReact

Accessible, unstyled one-time-password input for React — the OTP field used by the shadcn/ui component.