{"id":10915,"library":"framer-motion","title":"Motion (Animation Library)","description":"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.","status":"active","version":"12.38.0","language":"javascript","source_language":"en","source_url":"https://github.com/motiondivision/motion","tags":["javascript","react animation","react","pose","react pose","animation","gestures","drag","spring","typescript"],"install":[{"cmd":"npm install framer-motion","lang":"bash","label":"npm"},{"cmd":"yarn add framer-motion","lang":"bash","label":"yarn"},{"cmd":"pnpm add framer-motion","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for using Motion with React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components with Motion.","package":"react-dom","optional":false},{"reason":"Used internally by Motion to filter valid DOM props, preventing unknown or custom Motion-specific props from being rendered directly onto HTML/SVG elements. This helps avoid React warnings for unrecognized props.","package":"@emotion/is-prop-valid","optional":false}],"imports":[{"note":"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.","wrong":"import { motion } from 'framer-motion'","symbol":"motion","correct":"import { motion } from 'motion/react'"},{"note":"For vanilla JavaScript projects, import the `animate` function directly from the `motion` package. This provides imperative animation control for DOM elements.","wrong":"import { animate } from 'motion/react'","symbol":"animate","correct":"import { animate } from 'motion'"},{"note":"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.","wrong":"import { AnimatePresence } from 'framer-motion'","symbol":"AnimatePresence","correct":"import { AnimatePresence } from 'motion/react'"}],"quickstart":{"code":"import React from 'react';\nimport { motion } from 'motion/react';\n\nfunction AnimatedBox() {\n  return (\n    <motion.div\n      initial={{ opacity: 0, x: -100 }}\n      animate={{ opacity: 1, x: 0 }}\n      transition={{\n        duration: 0.8,\n        delay: 0.2,\n        ease: [0, 0.71, 0.2, 1.01]\n      }}\n      style={{\n        width: '100px',\n        height: '100px',\n        backgroundColor: '#61dafb',\n        borderRadius: '10px',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        fontSize: '1.2rem',\n        color: 'white',\n        cursor: 'pointer'\n      }}\n      whileHover={{ scale: 1.1, backgroundColor: '#282c34' }}\n      whileTap={{ scale: 0.9 }}\n    >\n      Hello Motion!\n    </motion.div>\n  );\n}\n\nexport default AnimatedBox;","lang":"typescript","description":"This quickstart demonstrates a basic animated React component using Motion, showcasing initial and animate props, custom transitions, and interactive `whileHover`/`whileTap` gestures."},"warnings":[{"fix":"Run `npm uninstall framer-motion` then `npm install motion`. Update imports: `import { ... } from 'framer-motion'` becomes `import { ... } from 'motion/react'`.","message":"The 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.","severity":"breaking","affected_versions":"All versions migrating from `framer-motion` to `motion`"},{"fix":"Consult the official Motion upgrade guide for specific breaking changes between major versions, especially concerning animation behavior and component lifecycles.","message":"Major 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.","severity":"breaking","affected_versions":">=3.0"},{"fix":"Verify your import statements: `import { motion } from 'motion/react'` for React; `import { animate } from 'motion'` for vanilla JavaScript.","message":"The `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.","severity":"gotcha","affected_versions":">=12.0"},{"fix":"If you encounter 'Module not found' errors, explicitly install the peer dependency: `npm install @emotion/is-prop-valid` or `yarn add @emotion/is-prop-valid`.","message":"Motion 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).","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Uninstall `framer-motion` and install `motion` (`npm install motion`). Update all import paths from `framer-motion` to `motion/react`.","cause":"The package `framer-motion` has been rebranded to `motion`.","error":"Cannot find module 'framer-motion' or its corresponding type declarations."},{"fix":"For React components, ensure you are importing `motion` from the correct subpath: `import { motion } from 'motion/react'`.","cause":"Incorrect import path for Motion's React components, or attempting to use React-specific features from the vanilla JS import.","error":"`motion.div` is not a function or `motion` is undefined."},{"fix":"Each `motion` component or property that needs an independent `MotionValue` should have its own instance. Re-evaluate your component tree to ensure `MotionValue`s are not shared across props where independent animation is expected.","cause":"Attempting to pass a `MotionValue` instance (often created with `useMotionValue`) to multiple `motion` components, which is not supported as `MotionValue`s manage state for a single animated property on one component.","error":"Uncaught Error: A MotionValue can only be bound to a single component."},{"fix":"Install the missing dependency: `npm install @emotion/is-prop-valid` or `yarn add @emotion/is-prop-valid`.","cause":"The `@emotion/is-prop-valid` peer dependency or its types are not installed.","error":"TS2307: Cannot find module '@emotion/is-prop-valid' or its corresponding type declarations."}],"ecosystem":"npm"}