Motion is an open source, MIT-licensed animation library for React, JavaScript and Vue that provides a simple API and a hybrid engine for 120fps, GPU-accelerated animation.

What it is

Motion is a TypeScript animation library distributed on npm and documented at motion.dev. It ships first-class packages for three targets, installed as motion for React and JavaScript and motion-v for Vue, and it is built around a hybrid engine that combines JavaScript with native browser APIs to deliver 120fps, GPU-accelerated animation. The library is production-oriented: TypeScript throughout, an extensive test suite, tree-shakable output, and a small footprint. Its stated batteries are gestures, springs, layout transitions, scroll-linked effects and timelines, so common interaction work does not need separate dependencies. The repository carries 33,653 stars, 1,363 forks and 112 open issues, with the most recent push on 16 September 2026.

The concrete thing it replaces is framer-motion. Motion is the continuation of Framer Motion under a new name, and the README states this directly: Framer Motion is now Motion, and code should import from motion/react instead of framer-motion. That rename is the migration path for existing React projects, while JavaScript and Vue consumers get the same engine through dedicated entry points rather than a React-only package. In the JavaScript case the API is imperative and element-based, as in animate("#box", { x: 100 }), while React uses the motion component imported from motion/react and Vue uses motion imported from motion-v. The problem it solves is therefore twofold: a consistent animation layer across React, plain JavaScript and Vue, and a documented route off the old framer-motion import for teams already invested in it.

Key capabilities

• Hybrid engine that pairs JavaScript with native browser APIs for 120fps, GPU-accelerated animation.
• First-class package entry points per platform: motion/react for React, motion for JavaScript, and motion-v for Vue.
• Imperative JavaScript API, demonstrated as animate("#box", { x: 100 }).
• Batteries included: gestures, springs, layout transitions, scroll-linked effects and timelines in the core library.
• Tree-shakable TypeScript build with an extensive test suite and a small footprint.
• 330+ official examples with copy-paste code, of which over 100 include full step-by-step tutorials.
• Contributing process documented in CONTRIBUTING.md for anyone working on the library itself.

Who uses it and how

• Websites built with Framer, the web builder for creative professionals, rely on Motion for all of their animations; the Motion site itself is built on Framer.
• Motion drives the animations on the Cursor homepage, and the project is working with Cursor to bring AI workflows into the Motion examples and documentation.
• React teams already on framer-motion migrate by changing imports to motion/react, keeping the same component model.
• Vue and plain JavaScript teams adopt the library through the separate motion-v and motion packages rather than through a React wrapper.
• Sustainability comes from sponsors, including named personal sponsors, alongside the paid Motion+ membership aimed at individual developers who want premium material and early access.

Getting started

Install the package for the target platform: npm install motion for React and JavaScript, or npm install motion-v for Vue. Platform-specific setup, the React, JavaScript and Vue quick-start guides, and the example and tutorial collections all live at motion.dev.

How it compares

The provided facts name no competing or paid products that Motion replaces, so it stands alone in this registry entry on that axis. Motion+ is the project's own optional membership rather than an alternative product: a one-time payment with lifetime updates that adds premium APIs such as Cursor and Ticker, a transition editor for Cursor and VS Code, AI skills, a private Discord and early access content, while the library itself remains MIT licensed.

When to use it — and when not to

Motion is a client-side npm dependency with no database, storage or SMTP to operate, so adoption cost is limited to a package install and bundler configuration; the editing, documentation and premium tooling around it live at motion.dev and inside the paid Motion+ membership rather than in the repository. Teams not building on React, JavaScript or Vue should look elsewhere, since those are the only three platforms the facts describe. The main caveat visible here is documentation shape rather than staleness: the README excerpt is largely a platform summary and index, so configuration and API details have to be read off-repo, and the premium APIs and transition editor named above sit behind Motion+ rather than in the MIT package.

# React / JavaScript
npm install motion

# Vue
npm install motion-v

import { motion } from "motion/react"

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

import { animate } from "motion"

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

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

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