Framer Motion Is Now Motion: An Animation Library for React, JavaScript, and Vue

If you've ever wrestled with CSS keyframes or hand-rolled requestAnimationFrame loops just to get a box to slide across the screen, you know the pain. Animation on the web has historically been either too simple or too fiddly. Motion, the library formerly known as Framer Motion, is trying to change that by offering a single animation toolkit that works across React, vanilla JavaScript, and Vue.

What It Does

Motion is an open-source animation library with first-class packages for React, JavaScript, and Vue. Under the hood, it uses what the project calls a hybrid engine, combining JavaScript with native browser APIs to deliver GPU-accelerated animations that can hit 120fps. It's written in TypeScript, tree-shakable, and ships with a small footprint.

The library comes with a fairly broad feature set out of the box: gestures, springs, layout transitions, scroll-linked effects, and timelines. Rather than stitching together multiple libraries for each of these, you get them all in one place. The API is intentionally simple. In React, you import motion and attach an animate prop to a motion.div. In vanilla JS, you call animate("#box", { x: 100 }). In Vue, you import motion from motion-v and use it in your template. The mental model stays consistent across frameworks, which is rarer than it should be.

Why It's Cool

• One library, three ecosystems. Most animation libraries pick a lane. Motion supports React, JavaScript, and Vue with dedicated packages, so if you work across frameworks (or your team does), you're not relearning a new API every time you switch contexts.

• The hybrid engine is a smart trade-off. Pure CSS animations are fast but limited. Pure JavaScript is flexible but can be slow. Motion blends the two, leaning on native browser APIs where possible and falling back to JavaScript when needed. That's how it claims 120fps GPU-accelerated animations without giving up the expressiveness of a JS-driven API.

• Batteries included, but tree-shakable. Gestures, springs, layout transitions, scroll-linked effects, and timelines are all built in. But because the library is tree-shakable, you only pay for what you import. That's a nice balance between convenience and bundle size discipline.

• 450+ examples with copy-paste code. The project hosts over 450 official examples, and more than 110 of them come with full step-by-step tutorials. If you learn best by reading working code, this is a substantial resource. It covers everything from beginner patterns to advanced techniques.

• AI tooling that's actually useful. Motion ships an agent skill via npx motion-ai that installs a /motion skill and sets up MCP servers for Claude Code, Cursor, Amp, OpenCode, Gemini CLI, and Copilot. There's also a free MCP server at https://mcp.motion.dev that searches the docs and example metadata, plus an llms.txt file indexing every docs page. If you're using AI coding assistants, this means they'll have current Motion documentation instead of hallucinating outdated APIs.

• A visual editor. Motion Studio is described as a visual animation editor, though the README truncates before going into detail. Still, the presence of a GUI tool alongside the code-first library suggests the team is thinking about workflows beyond just writing animation code by hand.

How to Try It

Getting started depends on which framework you're using.

For React or vanilla JavaScript:

npm install motion

For Vue:

npm install motion-v

Then, in React:

import { motion } from "motion/react"

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

Note that if you're migrating from Framer Motion, you'll now import from motion/react instead of framer-motion.

In vanilla JavaScript:

import { animate } from "motion"

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

In Vue:

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

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

From there, the official docs cover each platform in depth: React, JavaScript, and Vue. You can also browse the examples for copy-paste starting points.

The full source is on GitHub at motiondivision/motion.

Final Thoughts

Motion is a solid choice if you're building animations in React, Vue, or plain JavaScript and want a single library that handles the common cases without forcing you to assemble a stack of dependencies. The hybrid engine, the tree-shakable design, and the sheer volume of examples make it approachable whether you're new to web animation or you've been doing it for years. The AI tooling is a thoughtful addition that reflects where development workflows are heading. If you've been putting off learning an animation library because they all seemed too framework-specific or too heavy, this one's worth a look.