motion by motiondivision - RepoMind Architecture & Analysis

<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion</h1> <h3 align="center"> An open source animation library<br />for JavaScript, React and Vue </h3> <p align="center"> <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/motion?color=0368FF&label=version" alt="npm version"></a> <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/dm/framer-motion?color=8D30FF&label=npm" alt="npm downloads per month"></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/motion"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/framer-motion?logo=jsdeliver&color=FF4FBA"></a> <img alt="NPM License" src="https://img.shields.io/npm/l/motion?color=FF2B6E"> </p>

# React / JavaScript
npm install motion

# Vue
npm install motion-v

Why Motion?
🍦 Platforms
🎓 Examples
⚡️ 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.

<details> <summary>React</summary>

import { motion } from "motion/react"

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

Get started with Motion for React.

</details> <details> <summary>JavaScript</summary>

import { animate } from "motion"

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

Get started with JavaScript.

</details> <details> <summary>Vue</summary>

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

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

Get started with Motion for Vue.

</details>

🎓 Examples

Browse 100+ free and 180+ premium Motion Examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.

⚡️ Motion+

A one-time payment, lifetime-updates membership:

180+ premium examples
Premium APIs like Cursor and Ticker
Visual editing for VS Code (alpha)
Private Discord
Early access content

Get Motion+

👩🏻‍⚖️ 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.

Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.

Platinum

Gold

Silver

motiondivision / motion

AI Architecture Analysis

Embed this Badge

Repository Summary (README)

Table of Contents