framer-motion

About

A simple and powerful JavaScript animation library

What detecting framer-motion tells you about a site

framer-motion (now shipped as `motion`) reveals a site investing in real animation — gestures, layout transitions, scroll-linked effects — beyond CSS transitions. Its presence usually means a design-led product where motion is part of the brand.

Why the exact framer-motion version matters

The package was renamed and restructured around the v11/v12 line and the move to the `motion` name, with API and bundle-size changes. The exact version tells you which import surface the code uses and how much animation runtime the page is paying for.

framer-motion in a real-world stack

When you find framer-motion in a bundle, it rarely travels alone. react, and commonly a component library or a marketing-site stack.

Quick facts

Common pairings

Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.

What framer-motion pulls in

framer-motion declares 3 direct dependencies — each one also rides into any bundle that ships framer-motion, so they are detection targets too. Reading them is a quick way to understand the package's real footprint .

How Sourcemap Explorer detects framer-motion

framer-motion ships as v12.43.0, published 2026-07-28 and carries 3 direct dependencies, 3 peer dependencies (react, react-dom, @emotion/is-prop-valid), 1,388 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when framer-motion rides inside a deployed bundle — here is how the detection works.

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. 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 — that map is where the `framer-motion` paths live.

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

Major releases of framer-motion

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the framer-motion version a site actually ships against the ecosystem.

Recent versions

framer-motion README

Live mirror of the GitHub README, for reference. 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

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.

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

• OlegWock
• Lambert Weller
• Jake LeBoeuf

FAQ

Keep reading on Sourcemap Explorer