Configs2026年4月11日·1 分钟阅读

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
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

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>
  );
}
介绍

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

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

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
◈首页🔍搜索👤我的