ContextQMD
Back to Motion

React / JavaScript

packages/motion/README.md

12.38.06.4 KB
Original Source
<h1 align="center"> Motion</h1> <h3 align="center"> An open source animation library for JavaScript, React and Vue </h3> <p align="center"> <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ></a> <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ></a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/motion"></a> </p>
bash
# React / JavaScript
npm install motion

# Vue
npm install motion-v

Table of Contents

  1. Why Motion?
  2. 🍦 Platforms
  3. 🎓 Examples
  4. ⚡️ Motion+
  5. 👩🏻‍⚖️ License
  6. 💎 Contribute
  7. ✨ 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.

React

jsx
import { motion } from "motion/react"

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

Get started with Motion for React.

Note: Framer Motion is now Motion. Import from motion/react instead of framer-motion.

JS

javascript
import { animate } from "motion"

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

Get started with JavaScript.

Vue

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

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

Get started with Motion for Vue.

🎓 Examples & tutorials

Browse 330+ official examples, with copy-paste code that'll level-up your animations whether you're a beginner or an expert.

Over 100 examples come with a full step-by-step tutorial.

⚡️ Motion+

A one-time payment, lifetime-updates membership:

  • 330+ examples
  • 100+ tutorials
  • Premium APIs like Cursor and Ticker
  • Transition editor for Cursor and VS Code
  • AI skills
  • Private Discord
  • Early access content

Get Motion+

👩🏻‍⚖️ License

  • Motion is MIT licensed.

💎 Contribute

✨ 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.

<a href="https://framer.link/FlnUbQY"> </a>

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

<a href="https://cursor.com"> </a>

Platinum

<a href="https://linear.app"></a> <a href="https://figma.com"></a> <a href="https://sanity.io"></a> <a href="https://animations.dev"></a> <a href="https://clerk.com?utm_campaign=motion"></a> <a href="https://www.greptile.com/?utm_source=motion&utm_medium=sponsorship"></a>

Gold

<a href="https://mintlify.com"></a>

Silver

<a href="https://liveblocks.io"></a> <a href="https://www.frontend.fyi/?utm_source=motion"></a> <a href="https://firecrawl.dev"></a> <a href="https://puzzmo.com"></a> <a href="https://bolt.new"></a>

Personal