Framer Motion Animation Engine

<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">

<a target="_blank" rel="noopener noreferrer nofollow" href="https://score.motion.dev/site/motion.dev?utm_source=github&utm_medium=readme-badge"><img height="20" alt="MotionScore grade" src="https://api.motion.dev/score/badge?url=motion.dev"></a>

</p>

# 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

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

import { animate } from "motion"

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

Get started with JavaScript.

Vue

<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

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

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

<img alt="Framer" src="https://github.com/user-attachments/assets/22a79be7-672e-4336-bfb7-5d55d1deb917" width="250px" height="150px">

</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">

<img alt="Cursor" src="https://github.com/user-attachments/assets/81c482d3-c2c2-4b35-bbcf-933b28d5b448" width="250px" height="150px" />

</a>

Platinum

<a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/f9ce44b4-af28-4770-bb6e-9515b474bfb2" width="250px" height="150px"></a> <a href="https://figma.com"><img alt="Figma" src="https://github.com/user-attachments/assets/1077d0ab-4305-4a1f-81c8-d5be8c4c6717" width="250px" height="150px"></a> <a href="https://sanity.io"><img alt="Sanity" src="https://github.com/user-attachments/assets/80134088-f456-483f-8edd-940593c120ce" width="250px" height="150px"></a> <a href="https://animations.dev"><img alt="Sanity" src="https://github.com/user-attachments/assets/7c5ab87d-c7d9-44b4-9c7e-f9e6a9f3ba3b" width="250px" height="150px"></a> <a href="https://clerk.com?utm_campaign=motion"><img alt="Clerk" src="https://github.com/user-attachments/assets/16789f85-eaf4-46fb-9961-b3e66d33afbc" width="250px" height="150px"></a>

Gold

Silver

<a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="150px" height="100px"></a> <a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/f16e3eb9-f0bd-4ad1-8049-f079a3d65c69" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/2c44e7f4-5c2a-4714-9050-1570538665ff" width="150px" height="100px"></a> <a href="https://bolt.new"><img alt="Bolt.new" src="https://github.com/user-attachments/assets/7932d4b2-bb6c-422e-82b9-6ad78a7e3090" width="150px" height="100px"></a>

Personal sponsors

• OlegWock
• Lambert Weller
• Jake LeBoeuf