Registry / web-framework / framer-motion

framer-motion

library12.38.0jsnpmunverified

Motion, formerly known as Framer Motion, is a robust and highly performant open-source animation library designed for modern web development, offering first-class support for React, vanilla JavaScript, and Vue (via the separate `motion-v` package). As of version 12.38.0, it provides a simple yet powerful API for creating 120fps, GPU-accelerated animations using a hybrid engine that intelligently combines JavaScript capabilities with native browser APIs. The library maintains an active and frequent release cadence, with updates often published weekly or bi-weekly. Key differentiators include its comprehensive suite of "batteries-included" features, such as declarative gestures (drag, tap, hover), spring physics, advanced layout transitions for shared elements, scroll-linked effects, and complex timeline orchestrations. Motion is production-ready, featuring TypeScript support, tree-shakability, a tiny footprint, and an extensive test suite, making it a reliable choice for building fluid and interactive user interfaces across various platforms.

web-framework

github ↗package ↗homepage ↗

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

For React projects, use the `motion/react` subpath. The `framer-motion` package name and import path are deprecated in favor of `motion` and `motion/react` since the rebranding.

import { motion } from 'motion/react'

For vanilla JavaScript projects, import the `animate` function directly from the `motion` package. This provides imperative animation control for DOM elements.

import { animate } from 'motion'

This component is essential for animating components as they unmount from the DOM (exit animations) or enter/exit lists in React. Always import from `motion/react` for React projects.

import { AnimatePresence } from 'motion/react'

This quickstart demonstrates a basic animated React component using Motion, showcasing initial and animate props, custom transitions, and interactive `whileHover`/`whileTap` gestures.

import React from 'react'; import { motion } from 'motion/react'; function AnimatedBox() { return ( <motion.div initial={{ opacity: 0, x: -100 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.8, delay: 0.2, ease: [0, 0.71, 0.2, 1.01] }} style={{ width: '100px', height: '100px', backgroundColor: '#61dafb', borderRadius: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '1.2rem', color: 'white', cursor: 'pointer' }} whileHover={{ scale: 1.1, backgroundColor: '#282c34' }} whileTap={{ scale: 0.9 }} > Hello Motion! </motion.div> ); } export default AnimatedBox;

Debug

Known footguns

breakingThe package has been rebranded from `framer-motion` to `motion`. Existing projects must uninstall `framer-motion` and install `motion`, then update all import paths from `framer-motion` to `motion/react` for React components. The old package is no longer actively developed.

breakingMajor versions of Framer Motion (e.g., v3.0) included specific breaking changes related to velocity calculation, render scheduling, and `AnimatePresence` behavior. While the current `motion` package is at v12+, be mindful of detailed upgrade guides when moving between significant versions.

gotchaThe `motion` package now serves multiple platforms (React, vanilla JS, Vue via `motion-v`). Ensure you are using the correct import path for your environment (`motion/react` for React, `motion` for vanilla JS) to avoid errors or unintended behavior.

gotchaMotion has a peer dependency on `@emotion/is-prop-valid`. While package managers often handle peer dependencies, you might encounter 'Module not found' warnings or errors if this dependency is not explicitly installed or if your build setup is unusual (e.g., in some monorepo configurations or older bundlers).

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

23 hits · last 30 days

perplexity-user

ahrefsbot

dotbot

oai-searchbot

script

bytedance

googlebot

Resources

githubhttps://github.com/motiondivision/motion ↗

packagehttps://www.npmjs.com/package/framer-motion ↗

homepagehttps://motion.dev ↗