motion.dev/
MO
Motion
面向 Web 的动画库（前身是 Framer Motion）：用一个极小的 MIT 开源包，搞定弹簧物理、手势、布局过渡与滚动联动动画，支持 React、原生 JavaScript 与 Vue。
立即开始了解更多
立即试用
GPT-4o什么是 Motion?
Motion 的前身是大名鼎鼎的 Framer Motion，由 Motion Division 团队维护，是 Web 领域事实标准级的开源动画与手势库，被 Framer、Figma 等用于数十万站点的生产环境。它采用声明式 API 与混合引擎：把 JavaScript 与硬件加速的浏览器原生 API 结合，实现最高 120fps 的流畅动画，同时体积极小（许多 API 比对应的 GSAP 方案小多达 90%）。除了普通补间，它还内置真实的弹簧物理、悬停/点击/平移/拖拽手势、业界领先的布局与共享布局过渡、滚动联动与滚动触发动画、时间线、退出动画以及全轴变换。它以 TypeScript 优先、支持摇树优化与 SSR、测试覆盖完善，对 React 提供一等支持，同时提供原生 JavaScript 与 Vue 绑定，并附 300+ 官方示例。它还面向 AI 时代设计，提供智能体可读取的文档、技能与 API，方便 AI 编程工具直接生成可用代码。
4.8
评分
免费增值
定价模式
5+
平台
0
收藏
优点
- React 生态事实标准的动画库，被 Framer、Figma 等超大规模产品在生产环境使用。
- 一个依赖就涵盖弹簧、手势、布局过渡与滚动动效，省去拼装多个库的麻烦。
- 体积极小、可摇树、TypeScript 优先，支持 SSR，文档与示例丰富。
- 基于 MIT 免费开源，同一团队同时支持 React、原生 JS 与 Vue。
- 非常契合 vibecoding：复制的代码片段在各类 AI 编程助手里都能正确运行。
缺点
- 最强大的能力仍以 React 为中心，原生 JS 与 Vue 的 API 相对窄一些。
- 复杂的弹簧编排与布局动画仍有一定学习曲线。
- 在低端手机上持续播放重度动画仍会占用 CPU、消耗电量。
- 部分高阶时间线与可视化工具放在付费的 Motion Plus 方案中。
核心能力
Springs and tween animations
Drag/tap/hover/pan gestures
Layout & shared-layout transitions
Scroll-linked effects
React, JS and Vue
Agent-ready docs and skills
同类工具对比
| 功能 | Motion | React Bits | Jiro | PropertySurvey Pro |
|---|---|---|---|---|
| 评分 | 4.8 | 4.8 | 4.6 | 4.8 |
| 定价模式 | 免费增值 | 免费增值 | 免费增值 | 免费增值 |
| 起价 | — | Free | — | Free / Paid |
| API | — | — | — | — |
| 免费版 | — | — | — | — |
| 移动端 | — | — | — | — |
适用人群
前
前端工程师
为 React / Next.js 产品添加微交互、悬停态与元素过渡动画。
独
独立开发者 / 创始人
用弹簧与拖拽手势，让 v0、Lovable、Cursor、Bolt 生成的网站更有高级感。
设
设计工程师
用很少的代码打造滚动驱动的落地页与共享布局动画。
组
组件库作者
发布带动效、可访问、支持 SSR 且类型完整的基础组件。
原
原型设计者
基于 300+ 官方示例快速尝试各种交互创意。
开发者
Motion Division
支持平台
网页版 暂不支持
Windows 暂不支持
Mac 暂不支持
iPhone/iPad 暂不支持
安卓 暂不支持
华为 暂不支持
Linux 暂不支持
支持语言
English, 中文
成立时间
2018
更新于
2026-09-06
公司信息
成立于 2018
常见问题
Motion 是 Framer Motion 的新名称与新包名，出自同一团队，API 延续，并从 React 扩展到了原生 JavaScript 与 Vue。