Guide · Open source

How to use Motion: install and animate in React, JavaScript or Vue

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Motion is an open source animation library for JavaScript, React and Vue that adds movement to web pages and apps, such as sliding, fading, springy bounces and layout changes. This guide is for developers who want to add animation with code. By the end you will know which package to install, how to write a first animation and where to find more examples.

Motionmotiondivision/motion · ★ 34.8k · MIT Install options & downloads

Quick start

1Check prerequisites. Confirm that Node.js and npm are installed on your machine.
2Pick your package. Use motion for React or JavaScript, or motion-v for Vue.
3Install with npm. Run npm install motion or npm install motion-v in your project folder.
4Import the API. Import motion from motion/react in React, animate from motion in plain JavaScript, or motion from motion-v in Vue.
5Add an animate value. Set the animate prop on a motion element, or pass a selector and values to animate, such as x: 100.
6Explore examples. Browse the official examples at motion.dev/examples to learn more effects.

What you need before you install Motion

Motion is installed with a package manager. The source lists Node.js and npm as the prerequisites, so make sure both are available on your machine before you start.

Node.js
npm

Install Motion for React or JavaScript, or for Vue

Motion ships separate packages for React and plain JavaScript, and a different one for Vue. Run the command that matches your project from its root folder.

React or JavaScript: install the motion package
Vue: install the motion-v package

# React / JavaScript
npm install motion

# Vue
npm install motion-v

Animate your first element in React

In React, import the motion component from motion/react. Wrap an element with motion and pass the values you want to animate in the animate prop. In the example, a div moves 100 pixels along the x axis.

The source notes that Framer Motion is now Motion. If your project still imports from framer-motion, change the import to motion/react.

import { motion } from "motion/react"

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

Animate an element in plain JavaScript

Without React, import the animate function from the motion package. Pass it a selector for the element and the values to animate. The example moves the element with the id box, found by the selector #box, 100 pixels along the x axis.

import { animate } from "motion"

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

Use Motion in Vue

For Vue, the source shows importing motion from the motion-v package and using a motion.div element in the template with an animate binding. Follow the Motion for Vue docs linked from the README for the full setup.

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

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

Find examples and learn further features

The README says Motion includes gestures, springs, layout transitions, scroll-linked effects and timelines. It links to more than 450 official examples at motion.dev/examples, and over 110 of them come with a step-by-step tutorial. Use these to learn a specific effect before writing your own.

Motion also has an optional AI setup: running npx motion-ai installs an agent skill and sets up MCP servers for several coding agents. Some features, such as Motion+, are paid.

Gestures, springs, layout transitions, scroll-linked effects, timelines
Official examples at motion.dev/examples
Full docs at motion.dev

What people use it for

Sliding, fading and bouncing page elements in a React app
Animating elements on a plain web page with JavaScript
Adding animation to a Vue project with the motion-v package
Building interactive sites that use gestures, springs or scroll-linked effects
Animating layout changes between states in an interface

Frequently asked questions

How do I install Motion?

Install Motion with npm. Run npm install motion for React or JavaScript, or npm install motion-v for Vue. You need Node.js and npm installed first.

Is Motion free?

The Motion library is MIT licensed, as stated in the README. Motion+ is a separate paid offering with a one-time Personal licence or an annual Business plan.

Is Framer Motion the same as Motion?

The README says Framer Motion is now Motion. Import from motion/react instead of framer-motion.

Do I need to know how to code to use Motion?

Yes, Motion is a code library. The README's visual editor, Motion Studio, is a separate product for editing animations visually.

What are the alternatives to Motion?

The source lists GSAP, Anime.js, React Spring and Popmotion as comparable projects. Native CSS transitions can be simpler for a few basic effects.

Where can I find help or examples?

The README links to more than 450 official examples at motion.dev/examples, with over 110 including full tutorials. Full docs are at motion.dev.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Motion suits React, JavaScript and Vue developers who want a simple API for gestures, springs and layout animations. If you do not write code, or your project only needs a few CSS transitions, a visual tool or native CSS may be a better fit.

Install options & downloads