{"id":11363,"library":"motion","title":"Motion Animation Library","description":"Motion is a high-performance animation library designed for JavaScript, React, and Vue applications, currently at version 12.38.0. It offers a simple, declarative API that leverages a hybrid engine, combining JavaScript's flexibility with native browser APIs for GPU-accelerated, 120fps animations. Key differentiators include its production-readiness with comprehensive TypeScript support, extensive test suite, tree-shakability, and a tiny footprint. It provides a rich set of features out-of-the-box, such as gestures (drag), spring physics, layout transitions, scroll-linked effects, and animation timelines. While the core `motion` package targets vanilla JavaScript, it also provides specific packages and import paths for seamless integration with React (`motion/react`) and Vue (`motion-v`), making it a versatile choice for a wide range of web projects. Its evolution from Framer Motion signifies a streamlined approach to imports and usage across modern web frameworks.","status":"active","version":"12.38.0","language":"javascript","source_language":"en","source_url":"https://github.com/motiondivision/motion","tags":["javascript","javascript animation","react animation","react","three","3d","animation","gestures","drag","typescript"],"install":[{"cmd":"npm install motion","lang":"bash","label":"npm"},{"cmd":"yarn add motion","lang":"bash","label":"yarn"},{"cmd":"pnpm add motion","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used internally by Motion for React to filter props, preventing React from rendering non-standard HTML attributes. While marked as an optional peer dependency, it is highly recommended for proper functioning and avoiding warnings when using Motion with React.","package":"@emotion/is-prop-valid","optional":true},{"reason":"Required for Motion's React integration (`motion/react`) to function correctly, enabling component-based animations and hooks. Specifies broad compatibility with React 18 and 19.","package":"react","optional":false},{"reason":"Required for Motion's React integration (`motion/react`) for efficient rendering and interaction with the DOM. Specifies broad compatibility with React 18 and 19.","package":"react-dom","optional":false}],"imports":[{"note":"Primary function for vanilla JavaScript animations, targeting DOM elements directly. The `motion` package is ESM-first; CommonJS `require` syntax is generally unsupported for direct imports without a transpiler.","wrong":"const { animate } = require('motion')","symbol":"animate","correct":"import { animate } from 'motion'"},{"note":"This is the core component for animating elements in React. It must be imported from the specific `motion/react` subpath. Importing from `framer-motion` is incorrect after the package rebranding.","wrong":"import { motion } from 'framer-motion'","symbol":"motion (React component)","correct":"import { motion } from 'motion/react'"},{"note":"A widely used hook for creating spring-driven animations within React components. Like the `motion` component, it is specific to the React integration and imported from `motion/react`.","wrong":"import { useSpring } from 'motion'","symbol":"useSpring","correct":"import { useSpring } from 'motion/react'"},{"note":"TypeScript type definition for configuring animation variants, which are predefined animation states. Use `import type` to ensure it's removed during compilation.","symbol":"Variants (type)","correct":"import type { Variants } from 'motion/types'"}],"quickstart":{"code":"import { motion } from \"motion/react\";\nimport { useState } from 'react';\n\nfunction AnimatedBox() {\n  const [isHovered, setIsHovered] = useState(false);\n\n  return (\n    <motion.div\n      style={{\n        width: '100px',\n        height: '100px',\n        backgroundColor: isHovered ? '#ff0088' : '#0099ff',\n        borderRadius: '10px',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        color: 'white',\n        cursor: 'pointer'\n      }}\n      initial={{ x: 0, scale: 1 }}\n      animate={{ x: isHovered ? 50 : 0, scale: isHovered ? 1.1 : 1 }}\n      transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n      onHoverStart={() => setIsHovered(true)}\n      onHoverEnd={() => setIsHovered(false)}\n    >\n      Hover Me\n    </motion.div>\n  );\n}\n\n// Example of how you would render this component in a client-side React application:\n// import ReactDOM from 'react-dom/client';\n// const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\n// root.render(<AnimatedBox />);","lang":"typescript","description":"Demonstrates a basic React component utilizing `motion.div` to create an interactive element that animates with a spring effect on hover, showcasing declarative animation syntax."},"warnings":[{"fix":"Uninstall `framer-motion` (`npm uninstall framer-motion`), install `motion` (`npm install motion`), and then systematically update all import paths in your codebase: `import { ... } from 'framer-motion'` becomes `import { ... } from 'motion/react'` (for React) or `import { ... } from 'motion'` (for vanilla JS).","message":"The animation library previously known as `framer-motion` has been rebranded and rewritten as `motion`. When migrating, you must update your `package.json` to use `motion` and crucially change all import statements from `framer-motion` to `motion` (for vanilla JS) or `motion/react` (for React components/hooks). Failing to update import paths will result in 'Module not found' errors.","severity":"breaking","affected_versions":"All versions of `motion` (when migrating from `framer-motion` to the new package)"},{"fix":"Always use `import { motion } from 'motion/react'` for the `motion` component and `import { useSpring } from 'motion/react'` for React hooks. Reserve `import { animate } from 'motion'` for direct DOM manipulation outside of React components.","message":"When developing with Motion in a React project, it's critical to import React-specific components and hooks from the `motion/react` subpath. Importing them directly from the base `motion` package will lead to runtime errors or unexpected behavior, as the base package provides vanilla JavaScript utilities not designed for React's component model.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project is configured for ESM. For Node.js, this means setting `\"type\": \"module\"` in your `package.json` or using `.mjs` file extensions. For browser applications, use a modern bundler (Vite, Webpack, Rollup) that handles ESM transpilation and resolution.","message":"Motion is distributed as an ECMAScript Module (ESM) package. Direct usage in CommonJS environments (e.g., older Node.js scripts or tooling without explicit ESM support) can lead to `SyntaxError: Cannot use import statement outside a module` or similar issues.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Globally search and replace all instances of `import ... from 'framer-motion'` with `import ... from 'motion'` or `import ... from 'motion/react'` as appropriate for your code.","cause":"You have installed the new `motion` package but your code still contains `import` statements referencing the deprecated `framer-motion` package.","error":"Module not found: Can't resolve 'framer-motion' in 'your-project-path'"},{"fix":"Ensure you are using a named import for the `motion` component: `import { motion } from 'motion/react'`. Also, verify that `motion.div`, `motion.span`, etc., are being rendered within a React component's return statement.","cause":"This error typically indicates that the `motion` component from `motion/react` was not imported correctly or is being used outside of a valid React component context, often due to an incorrect default vs. named import, or attempting to use vanilla JS `motion` in a React component.","error":"TypeError: (0 , motion_react__WEBPACK_IMPORTED_MODULE_2__.motion) is not a function"},{"fix":"Ensure your build setup or Node.js environment correctly processes ESM. For Node.js, add `\"type\": \"module\"` to `package.json`. For bundlers, ensure your configuration is up-to-date and correctly handles module resolution for ESM packages.","cause":"This error occurs in environments where the bundler or runtime is trying to consume `motion` (an ESM package) as if it were a CommonJS module, and you're trying to destructure named exports from it.","error":"SyntaxError: Named export 'animate' not found. The requested module 'motion' is a CommonJS module, which may not support all module.exports as named exports."}],"ecosystem":"npm"}