motion README

The project's README from github.com/motiondivision/motion. As one markdown file: README.md.

Motion logo
Motion

An open source animation library
for JavaScript, React and Vue

npm version npm downloads per month jsDelivr hits (npm) NPM License MotionScore grade 

# React / JavaScript
npm install motion

# Vue
npm install motion-v

Table of Contents

  1. Why Motion?
  2. 🍦 Platforms
  3. 🎓 Examples
  4. 🎨 Motion Studio
  5. 🤖 Using Motion with AI
  6. ⚡️ Motion+
  7. 👩🏻‍⚖️ License
  8. 💎 Contribute
  9. ✨ Sponsors

Why Motion?

🍦 Platforms

Motion is available for React, JavaScript and Vue.

React

import { motion } from "motion/react"

function Component() {
    return <motion.div animate={{ x: 100 }} />
}

Get started with Motion for React.

Note: Framer Motion is now Motion. Import from motion/react instead of framer-motion.

JS

import { animate } from "motion"

animate("#box", { x: 100 })

Get started with JavaScript.

Vue

<script>
    import { motion } from "motion-v"
</script>

<template> <motion.div :animate={{ x: 100 }} /> </template>

Get started with Motion for Vue.

🎓 Examples & tutorials

Browse 450+ official examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.

Over 110 examples come with a full step-by-step tutorial on their example page.

🤖 Using Motion with AI

Give your coding agent current Motion docs:

Motion+ adds example and Motion UI source, MotionScore performance audits and CSS spring generation for your agent.

🎨 Motion Studio

A visual animation editor for your website. Edit keyframes, easing curves and springs on a live timeline, or describe changes to the Ultramotion agent, then apply the result straight to your code with Cursor, Codex or Claude.

Explore Motion Studio

⚡️ Motion+

A one-time Personal licence with lifetime updates, or an annual per-seat Business plan for teams:

Get Motion+

👩🏻‍⚖️ License

💎 Contribute

✨ Sponsors

Motion is sustainable thanks to the kind support of its sponsors.

Become a sponsor

Partners

Motion powers the animations for all websites built with Framer, the web builder for creative pros. The Motion website itself is built on Framer, for its delightful canvas-based editing and powerful CMS features.

Framer

Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.

Cursor

Platinum

Linear Figma Sanity Clerk

Gold

Silver

Liveblocks Frontend.fyi Firecrawl Bolt.new

Personal sponsors

motion (motiondivision/motion)

Searching Database…

34.2K ·GitHub
Motion
这是什么？Motion 是一个面向 JavaScript、React 和 Vue 的开源动画库——你可能听说过它以前的名字 Framer Motion。
它只能配合 React 使用，还是也支持原生 JavaScript 和 Vue？它是一个库，不是框架：你可以为 React、原生 JavaScript 或 Vue 选择对应的一等支持包，加到你现有的 UI 里。
我怎么把它加到我的项目里？为你的技术栈选择对应的包，然后按照它的 Get started 指南操作——README 里有分别针对 React、JavaScript 和 Vue 的独立指南链接。
我以前用过 Framer Motion——这是换成了一个新库吗？还是同一个库，只是改了名字：Framer Motion 现在叫 Motion。把你的导入从 'framer-motion' 改成 'motion/react' 即可。
它是免费的吗？Motion+ 又是什么？这个库采用 MIT 许可证，完全免费。唯一付费的部分是 Motion+，一种可选的会员服务，一次性付费，终身更新。
它开箱即用能做哪些动画？手势、弹簧动画、布局过渡、滚动联动效果和时间轴都是内置的——不需要额外的插件。
我在哪里能看到能实际运行的示例代码？官方提供了 330 多个可直接复制粘贴代码的示例，其中 100 多个还附带完整的分步教程。
Motion+ 会员能获得什么？Cursor 和 Ticker 等高级 API、适用于 Cursor 和 VS Code 的过渡编辑器、AI skills、专属 Discord 以及抢先体验内容——一次付费，终身更新。
What are similar projects?velocity, auto-animate, Libraries.dev, shaders, mojs, react-motion, lenis, GSAP
Which topics is it in?transition, motion, spring, javascript-library, vue, animation, ui, web-development, performance, gpu, react, npm
Creator
motiondivision
Size
1.6 GB
Stars
34.2K
Updated
CommitOct 16
Age
7y
Commits · 90 Days