motiondivision/motion

Framer Motion - animation and gesture handling for React

Summary

Motion is an open-source animation library written in TypeScript with first-class packages for React, vanilla JavaScript, and Vue. It succeeds Framer Motion, so existing code that imports framer-motion now imports from motion/react instead. The library is MIT licensed and combines JavaScript animation logic with native browser APIs for GPU-accelerated output.

What it is useful for

Motion is useful when you want declarative web animations without hand-writing requestAnimationFrame loops or hand-tweaking CSS transitions. The README describes a hybrid engine that uses native browser APIs to target 120fps on supported hardware. Built-in capabilities listed in the README include gestures, springs, layout transitions, scroll-linked effects, and timelines, covering scenarios such as hover and tap feedback, drag-to-reorder lists, page transitions, and scroll-driven UI changes. The library is tree-shakable and ships TypeScript types.

How engineers can use it

For React or JavaScript projects, install with npm install motion. For Vue, the README lists a separate package: npm install motion-v.

In a React component, import motion from motion/react and pass an animate prop on a motion.* element. The README's example:

import { motion } from "motion/react"

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

For non-JSX JavaScript, import animate from motion and pass a selector:

import { animate } from "motion"

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

For Vue, the README shows:

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

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

If you use AI coding agents (Claude Code, Cursor, Amp, OpenCode, Gemini CLI, Copilot), the README documents npx motion-ai, which installs a free, MIT-licensed /motion skill and sets up Motion's MCP servers. An MCP endpoint at https://mcp.motion.dev searches docs and examples, and llms.txt indexes the documentation for LLM agents. The README links to 450+ official examples, of which 110+ have step-by-step tutorials.

Documented limitations: A paid Motion+ subscription referenced in the README bundles premium APIs (Cursor, Ticker), the Motion Studio editor, performance audits, and CSS spring generation, and is separate from the MIT-licensed library. The full API reference beyond the snippets above lives on motion.dev and is not reproduced in this README.