全新升级 · 120fps GPU 加速
为现代 Web
打造的动画引擎
一个开源动画库，将 JavaScript 的强大能力与浏览器原生 API 结合， 为 React、JavaScript 和 Vue 提供生产就绪的动画解决方案。
探索演示
npm install motion8M+
NPM 月下载量
25K+
GitHub Stars
330+
官方示例
120fps
动画帧率
受到全球领先团队和产品的信赖
Framer
Cursor
Linear
Figma
Sanity
Clerk
Liveblocks
Bolt.new
Framer
Cursor
Linear
Figma
Sanity
Clerk
Liveblocks
Bolt.new
核心特性
为什么选择 Motion？
专为现代 Web 开发设计的动画解决方案，让你的界面焕发生机
混合引擎
将 JavaScript 的强大能力与浏览器原生 API 结合，实现 120fps、GPU 加速的丝滑动画。
简洁的 API
提供对 React、JavaScript 和 Vue 的一流支持，极简的声明式 API 让你专注创意。
生产就绪
使用 TypeScript 编写，拥有完善的测试套件，支持按需引入（tree-shaking），体积小巧。
弹簧动画
真实的物理弹簧系统，让动画拥有自然的惯性和弹性，告别生硬的线性动画。
手势交互
内置拖拽、悬停、点击、缩放等手势识别，让交互体验更加丰富生动。
滚动联动
滚动驱动的时间轴动画，视差效果、元素跟随滚动，打造沉浸式叙事体验。
交互演示
Motion 的 强大表现力
亲自体验以下演示，感受 Motion 在各类场景下的动画魅力
弹簧物理
真实的物理弹簧动画
按住我体验弹簧效果
自由拖拽
带约束的拖拽系统
在框内自由拖拽
布局动画
自动布局过渡
1
2
3
4
滚动联动
拖拽视差效果
1
2
3
4
5
6
7
8
复合手势
组合手势识别
悬停 · 拖拽 · 双击
代码示例
极简的 声明式 API
几行代码即可实现复杂的动画效果，让开发变得简单而优雅
import { motion } from "motion/react"
export default function App() {
return (
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
transition={{
type: "spring",
stiffness: 300,
damping: 20
}}
>
让元素动起来
</motion.div>
)
}跨平台支持
一套 API， 多端通用
无论你使用 React、Vue 还是原生 JavaScript，Motion 都能无缝集成
React
声明式组件动画，支持服务端渲染
import { motion } from "motion/react"
<motion.div animate={{ x: 100 }} />JavaScript
纯 JavaScript 驱动，框架无关的解决方案
import { animate } from "motion"
animate("#box", { x: 100 })Vue
响应式组件动画，完美融入 Vue 生态
import { motion } from "motion-v"
<motion.div :animate="{ x: 100 }" />