framer-motion
A simple and powerful JavaScript animation library
About
A simple and powerful JavaScript animation library
Live mirror of the GitHub README. Updated whenever the repo's default branch changes.
Motion
An open source animation library
for JavaScript, React and Vue
# React / JavaScript
npm install motion
# Vue
npm install motion-v
Table of Contents
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
👩🏻⚖️ 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.
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
Personal sponsors
Quick facts
npm install framer-motionCommon pairings
Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.
How Sourcemap Explorer detects framer-motion
We catch framer-motion from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/framer-motion/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.
- 1
Confirm the site exposes sourcemaps
In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment.
- 2
Find the package in the bundle
Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/framer-motion/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/framer-motion/package.json` gives you the exact installed version.
- 3
Read the version directly from package.json
Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/framer-motion/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.
Recent versions
FAQ
What is framer-motion used for?
A simple and powerful JavaScript animation library
How can I tell if a website is using framer-motion?
Open the page in Chrome with the Sourcemap Explorer extension installed and read the Stack tab. We catch `framer-motion` from two complementary signals: `node_modules/framer-motion/` paths inside the JavaScript sourcemap, and the embedded `package.json` we read for exact-version detection. Without the extension you can do the same lookup manually in DevTools — the steps are listed in the "How Sourcemap Explorer detects" section above.
What is the latest version of framer-motion?
12.38.0, as published on the npm registry. The "Recent versions" table on this page lists the most recent 8 releases with their release dates. Sourcemap Explorer reports the version actually bundled into a site, which can lag the latest release by months on real-world deployments.
Where can I read more?
Project homepage: https://github.com/motiondivision/motion#readme. Source code: https://github.com/motiondivision/motion. Published on npm: https://www.npmjs.com/package/framer-motion. Licensed as MIT.
Keep reading on Sourcemap Explorer
Detection deep dives
Alternative tools
Detected by Sourcemap Explorer
When a bundle ships sourcemaps, we read the embedded package.json for framer-motion and report the precise version. Without sourcemaps, an import / require in the page's scripts is enough to flag it.