ConfigsApr 11, 2026·1 min read

Motion (Framer Motion) — Modern Animation Library for React & JS

Motion (formerly Framer Motion) is a modern animation library for React and JavaScript with a simple declarative API. Hardware-accelerated transforms, gestures, layout animations, and SVG morphing — all in a tiny package.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm i motion
import { motion } from "motion/react";

function Card() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: "easeOut" }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
    >
      Hello
    </motion.div>
  );
}
Intro

Motion (formerly Framer Motion) is the most popular React animation library. Originally built at Framer for the Framer design tool, now an independent project led by Matt Perry. Production-grade with hardware-accelerated transforms and gesture handling.

What Motion Does

  • Declarative animations — initial, animate, exit props
  • Layout animations — auto-animate when DOM layout changes
  • Gestures — whileHover, whileTap, whileDrag, whileInView
  • Variants — orchestrate animations across components
  • Spring physics — natural-feeling motion
  • SVG morphing — animate path data
  • Scroll triggers — scroll-linked animations
  • Vanilla JS — motion/react and motion (vanilla)

Architecture

Wraps DOM elements with motion.div, motion.svg, etc. Uses Web Animations API where possible (hardware accelerated), falls back to RAF for unsupported properties. Layout animations use FLIP technique.

Self-Hosting

Client library only.

Key Features

  • Hardware-accelerated transforms
  • Spring & inertia physics
  • Layout animations (FLIP)
  • Gesture handling (drag, hover, tap, focus)
  • AnimatePresence for exit animations
  • Variants for orchestration
  • Scroll-linked animations
  • Server-side rendering
  • Now also supports vanilla JS

Comparison

Library API Layout Gestures Bundle
Motion Declarative Yes Built-in ~30KB
React Spring Imperative hooks Limited Manual ~15KB
GSAP Imperative No Plugin ~30KB
Auto-Animate Drop-in Yes No ~3KB

常见问题 FAQ

Q: 改名后包名是？ A: 从 framer-motion 改成 motion。React API 是 motion/react，vanilla 是 motion。

Q: layout 动画原理？ A: FLIP（First, Last, Invert, Play）：测量前后位置 → 反向 transform → 动画归零。零重排开销。

Q: bundle 太大？ A: 用 LazyMotion + 按需 features 可减到 ~5KB。

来源与致谢 Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

esbuild — Extremely Fast JavaScript Bundler

esbuild is an extremely fast JavaScript/TypeScript bundler written in Go. 10-100x faster than webpack/Rollup. Powers Vite, Bun, and many modern build tools as their underlying transform engine.

AI Open Source

Redux — Predictable Global State Management for JS Apps

Redux is the original predictable state container for JavaScript apps. Modern Redux uses Redux Toolkit (RTK) which reduces boilerplate 80% and includes RTK Query for server state. Still the standard for large-scale React apps.

AI Open Source

UnoCSS — Instant On-Demand Atomic CSS Engine

UnoCSS is the instant on-demand atomic CSS engine. Inspired by Tailwind/Windi but engine-first: define your own utilities, presets, and rules. 5x faster than Tailwind JIT with no parsing or AST overhead.

AI Open Source
◈Home🔍Search👤Me