{"id":11755,"library":"react-move","title":"React-Move Animation Library","description":"React-Move is a highly performant, data-driven animation library for React applications, supporting animations for HTML, SVG, and React-Native elements. Currently stable at version 6.5.0, it targets React 16.3 and above, focusing on a minimal bundle size (3.5kb gzipped). The library provides fine-grained control over animation properties like delay, duration, and easing, along with lifecycle events for 'start', 'interrupt', and 'end'. A key differentiator is its flexible approach to interpolation; while it handles numeric interpolation by default, it allows integration with libraries like `d3-interpolate` for complex types such as colors, paths, and SVG transforms. Major versions often align with React's lifecycle method changes, with a commitment to API stability between major releases. It ships with full TypeScript support, making it well-suited for modern web development. While v5.x provides backward compatibility for older React versions, v6.x is recommended for React 16.3+ to leverage a smaller bundle size by omitting the `react-lifecycles-compat` polyfill.","status":"active","version":"6.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/sghall/react-move","tags":["javascript","react-move","resonance","d3","svg","react","charts","graphs","animation","typescript"],"install":[{"cmd":"npm install react-move","lang":"bash","label":"npm"},{"cmd":"yarn add react-move","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-move","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React functionality required for rendering and component lifecycle management.","package":"react","optional":false},{"reason":"Provides advanced interpolation functions for non-numeric values like colors, paths, and SVG transforms when custom interpolation is required.","package":"d3-interpolate","optional":true}],"imports":[{"note":"Primary component for animating groups of elements based on data arrays; React-Move v6 is ESM-first.","wrong":"const { NodeGroup } = require('react-move')","symbol":"NodeGroup","correct":"import { NodeGroup } from 'react-move'"},{"note":"Component for animating single elements; React-Move v6 is ESM-first.","wrong":"const Animate = require('react-move').Animate","symbol":"Animate","correct":"import { Animate } from 'react-move'"},{"note":"Importing types for TypeScript; use `type` keyword for type-only imports.","wrong":"import { NodeGroupProps } from 'react-move'","symbol":"NodeGroupProps","correct":"import type { NodeGroupProps } from 'react-move'"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { NodeGroup } from 'react-move';\nimport { interpolate, interpolateTransformSvg } from 'd3-interpolate';\n\ninterface DataItem {\n  name: string;\n  x: number;\n  y: number;\n  transform: string;\n}\n\nconst AnimatedNodes: React.FC = () => {\n  const [data, setData] = useState<DataItem[]>([\n    { name: 'a', x: 0, y: 0, transform: 'translate(0,0) scale(1)' },\n    { name: 'b', x: 50, y: 50, transform: 'translate(50,50) scale(1)' },\n  ]);\n\n  const updateData = () => {\n    setData(prevData => prevData.map(d => ({\n      ...d,\n      x: Math.random() * 180 + 10,\n      y: Math.random() * 180 + 10,\n      transform: `translate(${Math.random() * 100},${Math.random() * 100}) scale(${0.5 + Math.random() * 1.5})`\n    })));\n  };\n\n  return (\n    <div>\n      <button onClick={updateData} style={{ marginBottom: '10px' }}>Animate Nodes</button>\n      <svg width=\"200\" height=\"200\" style={{ border: '1px solid #eee' }}>\n        <NodeGroup\n          data={data}\n          keyAccessor={(d: DataItem) => d.name}\n          start={(data: DataItem) => ({\n            x: data.x,\n            y: data.y,\n            transform: data.transform,\n            opacity: 0,\n          })}\n          enter={(data: DataItem) => ([\n            {\n              opacity: [1],\n              timing: { duration: 500 },\n            },\n            {\n              x: [data.x],\n              y: [data.y],\n              transform: [data.transform],\n              timing: { duration: 500 },\n            }\n          ])}\n          update={(data: DataItem) => ({\n            x: [data.x],\n            y: [data.y],\n            transform: [data.transform],\n            opacity: [1],\n            timing: { duration: 500, ease: 'easeCubicOut' },\n          })}\n          leave={() => ([\n            {\n              opacity: [0],\n              timing: { duration: 300 },\n            },\n            {\n              x: [0],\n              y: [0],\n              timing: { duration: 300 },\n            }\n          ])}\n          interpolation={(begValue, endValue, attr) => {\n            if (attr === 'transform') {\n              return interpolateTransformSvg(begValue, endValue);\n            }\n            return interpolate(begValue, endValue);\n          }}\n        >\n          {nodes => (\n            <g>\n              {nodes.map(({ key, data: item, state }) => (\n                <circle\n                  key={key}\n                  cx={state.x}\n                  cy={state.y}\n                  r={10}\n                  fill=\"steelblue\"\n                  opacity={state.opacity}\n                  transform={state.transform}\n                />\n              ))}\n            </g>\n          )}\n        </NodeGroup>\n      </svg>\n    </div>\n  );\n};\n\nexport default AnimatedNodes;","lang":"typescript","description":"Demonstrates animating a list of SVG circle nodes using `NodeGroup`. It includes dynamic data updates, entry/update/exit animations, and utilizes `d3-interpolate` for advanced SVG transform interpolation."},"warnings":[{"fix":"Upgrade your React peer dependency to `^16.3.0` or higher. If you cannot upgrade React, use `react-move@^5.0.0` which includes `react-lifecycles-compat` for broader React version support.","message":"React-Move v6.0.0 (and v3.0.0) requires React 16.3.0 or greater due to the adoption of new lifecycle methods. Using it with older React versions will result in runtime errors related to hooks or component lifecycles.","severity":"breaking","affected_versions":">=6.0.0, >=3.0.0 <4.0.0"},{"fix":"Install `d3-interpolate` via `npm install d3-interpolate` and configure the `interpolation` prop. Refer to the documentation for examples on how to integrate `interpolate` and `interpolateTransformSvg`.","message":"Since v4.0.0, `d3-interpolate` is no longer a hard dependency. If you require advanced interpolation for non-numeric values (e.g., colors, SVG paths, SVG transforms), you must explicitly install `d3-interpolate` and pass a custom `interpolation` prop to `NodeGroup` or `Animate`.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"If your project uses React 16.3.0 or newer, upgrade to `react-move@^6.0.0` to benefit from the reduced bundle size. If compatibility with older React versions is critical, remain on v5.x.","message":"Version 5.x of React-Move includes `react-lifecycles-compat` for compatibility with older React versions, which slightly increases the bundle size. For React versions 16.3.0 and newer, using `react-move@^6.0.0` is recommended to get the smallest possible bundle size.","severity":"gotcha","affected_versions":">=5.0.0 <6.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `d3-interpolate` as a dependency: `npm install d3-interpolate`. Ensure it is imported correctly where used: `import { interpolate } from 'd3-interpolate'`.","cause":"Attempting to use `interpolate` or `interpolateTransformSvg` from `d3-interpolate` in the `interpolation` prop without `d3-interpolate` being installed.","error":"TypeError: Cannot read properties of undefined (reading 'interpolate')"},{"fix":"Upgrade your React peer dependency to `^16.3.0` or higher. Alternatively, if upgrading React is not an option, downgrade `react-move` to version 5.x (`npm install react-move@^5.0.0`).","cause":"This error often indicates a React version mismatch, specifically using `react-move` v6 (which uses React 16.3+ lifecycle methods) with an older React version (e.g., <16.3.0).","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}