motion README

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

Motion

An open source animation library
for JavaScript, React and Vue

NPM License

# React / JavaScript
npm install motion

# Vue
npm install motion-v

Table of Contents

Why Motion?
🍦 Platforms
🎓 Examples
🎨 Motion Studio
🤖 Using Motion with AI
⚡️ Motion+
👩🏻‍⚖️ License
💎 Contribute
✨ Sponsors

Why Motion?

Simple API: First-class React, JavaScript, and Vue packages.
Hybrid engine: Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
Production-ready: TypeScript, extensive test suite, tree-shakable, tiny footprint. Batteries included: Gestures, springs, layout transitions, scroll-linked effects, timelines.

🍦 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:

Agent skill: npx motion-ai installs the free, MIT-licensed /motion skill and sets up Motion's MCP servers for Claude Code, Cursor, Amp, OpenCode, Gemini CLI and Copilot. Source on GitHub.
MCP server: https://mcp.motion.dev searches the Motion docs and example metadata. It is free and needs no account.
llms.txt: motion.dev/llms.txt indexes every docs page. Motion+ pages are labelled as paid, with their install and import.

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:

450+ examples
110+ tutorials
Premium APIs like Cursor and Ticker
Transition editor for Cursor and VS Code
AI Kit: example and Motion UI source, MotionScore audits and CSS springs for your agent
Private Discord
Early access content

👩🏻‍⚖️ License

Motion is MIT licensed.

💎 Contribute

Want to contribute to Motion? Our contributing guide has you covered.

✨ 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

Gold

Silver

Personal sponsors

Searching Database…

34.2K ·GitHub

What is this?

Motion is an open source animation library for JavaScript, React and Vue — you may know it by its former name, Framer Motion.

Is it React-only, or does it work with plain JavaScript and Vue too?

It's a library, not a framework: you add one of its first-class packages for React, plain JavaScript, or Vue to the UI you already have.

How do I add it to my project?

Pick the package for your stack and follow its Get started guide — the README links separate guides for React, JavaScript and Vue.

I used Framer Motion before — is this a different library now?

Same library, new name: Framer Motion is now Motion. Change your imports from 'framer-motion' to 'motion/react'.

Is it free, and what is Motion+?

The library is MIT licensed and free. The only paid part is Motion+, an optional membership with a one-time payment and lifetime updates.

What can it animate out of the box?

Gestures, springs, layout transitions, scroll-linked effects and timelines all come built in — no extra plugins needed.

Where can I learn from working code?

There are 330+ official examples with copy-paste code, and more than 100 of them include a full step-by-step tutorial.

What does a Motion+ membership add?

Premium APIs like Cursor and Ticker, a transition editor for Cursor and VS Code, AI skills, a private Discord and early access content — one payment, lifetime updates.

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