# sghall/react-move

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/sghall-react-move).**

6,564 stars · 168 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/sghall/react-move
- Homepage: https://react-move-docs.netlify.app
- awesome-repositories: https://awesome-repositories.com/repository/sghall-react-move.md

## Topics

`animate` `animation` `easing` `interpolation` `motion` `move` `movement` `react` `transition-animation`

## Description

React Move is a declarative animation library for React that animates components by interpolating between start and end states with configurable timing and easing. It provides data-driven transitions for single elements, groups, lists, and SVG elements, supporting staggered timing, custom interpolation for non-numeric values like colors and paths, and drag-and-drop reordering of list items.

The library distinguishes itself through its support for custom interpolation functions that replace default numeric interpolation, keyed array reconciliation for tracking items as they enter, update, or leave, and lifecycle callback hooks that fire at transition start, interruption, or completion. It also offers per-property timing configuration, nested state namespaces for organizing animated attributes, and staggered transition scheduling for choreographed visual effects across multiple elements.

Beyond its core animation capabilities, React Move handles SVG chart animation for elements like bars, lines, and axes, and supports collapsible tree animations with smooth expansion and collapse of nodes. The library provides control over transition timing with independent duration, delay, and easing values for each animated property or group of properties.

## Tags

### Part of an Awesome List

- [React Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/react-animation-libraries.md) — Provides a declarative animation library for React that interpolates between start and end states with configurable timing.
- [SVG Animation Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries.md) — Animates SVG elements such as bars, lines, and chart components with configurable delay, duration, and easing.
- [Data-Driven SVG Animations](https://awesome-repositories.com/f/awesome-lists/devtools/svg-animation-libraries/data-driven-svg-animations.md) — Animates SVG chart elements like bars, lines, and axes with configurable timing and easing for data visualization.

### User Interface & Experience

- [State-Driven Animations](https://awesome-repositories.com/f/user-interface-experience/ui-animations/state-driven-animations.md) — Animates React components by interpolating between start and end states with configurable timing and easing.
- [Animation Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/animation-lifecycle-hooks.md) — Responds to animation start, interruption, and end events to trigger custom logic during transitions.
- [React Animation Hooks](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/animation-lifecycle-hooks/react-animation-hooks.md) — Animates React components by interpolating between data states with configurable timing and lifecycle callbacks.
- [Animation Interpolators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/animation-interpolators.md) — Replaces default numeric interpolation with custom functions for colors, paths, or transforms. ([source](https://cdn.jsdelivr.net/gh/sghall/react-move@master/README.md))
- [Combined Property Transitions](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-properties/css-property-transitions/combined-property-transitions.md) — Allows independent delay, duration, and easing values for each animated property within a single transition.
- [Configurable Property Animators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-properties/pixijs-property-animators/configurable-property-animators.md) — Animates changes to CSS, SVG, or native style properties with configurable delay, duration, and easing. ([source](https://react-move-docs.netlify.app/demos/simple))
- [Data State Interpolators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/physics-motion-dynamics/physics-based-animations/physics-based-property-interpolators/frame-synchronized-interpolators/data-state-interpolators.md) — Animates components by interpolating between declarative start and end state objects with configurable easing.
- [Animation Lifecycle Callbacks](https://awesome-repositories.com/f/user-interface-experience/animation-frameworks/animation-lifecycle-callbacks.md) — Fires user-defined functions at transition start, interruption, and completion points during animation.
- [Custom Interpolation Functions](https://awesome-repositories.com/f/user-interface-experience/animation-interpolators/custom-interpolation-functions.md) — Replaces default numeric interpolation with user-defined functions for non-numeric values like colors or paths. ([source](https://cdn.jsdelivr.net/gh/sghall/react-move@master/README.md))
- [Transition Timings](https://awesome-repositories.com/f/user-interface-experience/component-transitions/reusable-transition-definitions/transition-timings.md) — Provides per-property control over animation duration, delay, and easing for declarative transitions. ([source](https://cdn.jsdelivr.net/gh/sghall/react-move@master/README.md))
- [Declarative Element Animators](https://awesome-repositories.com/f/user-interface-experience/component-utilities/animation-engines/dynamic-animation-controllers/dynamic-element-animation/declarative-element-animators.md) — Animates HTML, SVG, or native elements by interpolating between start and end states with configurable timing. ([source](https://react-move-docs.netlify.app/demos/animate))
- [Drag-and-Drop Row Reorderers](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-row-reorderers.md) — Supports reordering list items by dragging with pointer or touch gestures and animating the transition.
- [Keyed Reconciliation Systems](https://awesome-repositories.com/f/user-interface-experience/keyed-reconciliation-systems.md) — Tracks array items by unique keys to compute enter, update, and exit transitions during list animation.
- [Animation Motion Event Triggers](https://awesome-repositories.com/f/user-interface-experience/lifecycle-animation-triggers/animation-motion-event-triggers.md) — Triggers custom functions when animated elements reach defined spatial or temporal milestones. ([source](https://cdn.jsdelivr.net/gh/sghall/react-move@master/README.md))
- [List Transition Animations](https://awesome-repositories.com/f/user-interface-experience/list-transition-animations.md) — Animates an array of elements as they enter, update, or leave, tracking each item by a unique key. ([source](https://cdn.jsdelivr.net/gh/sghall/react-move@master/README.md))
- [Keyed Array Animators](https://awesome-repositories.com/f/user-interface-experience/numerical-animations/numeric-array-animators/keyed-array-animators.md) — Animates array items as they enter, update, or leave, tracking each by a unique key. ([source](https://cdn.jsdelivr.net/gh/sghall/react-move@master/README.md))
- [Slide Element Animations](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/slide-transition-engines/slide-element-animations.md) — Animates a single element through enter, update, and leave transitions with configurable timing and easing. ([source](https://cdn.jsdelivr.net/gh/sghall/react-move@master/README.md))
- [Group Enter-Update-Exit Animators](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/slide-transition-engines/slide-element-animations/group-enter-update-exit-animators.md) — Animates a set of elements as they enter, update, and exit with staggered or simultaneous transitions. ([source](https://react-move-docs.netlify.app/demos/node-group))
- [Staggered Animations](https://awesome-repositories.com/f/user-interface-experience/staggered-animations.md) — Sequences animations across multiple elements by applying incremental delays per item in a set.
- [SVG Chart Element Animators](https://awesome-repositories.com/f/user-interface-experience/chart-animations/svg-chart-element-animators.md) — Animates SVG chart components such as bars, lines, and axes with configurable timing and easing. ([source](https://react-move-docs.netlify.app/demos/charts))
- [Drag and Drop Libraries](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries.md) — Supports reordering list items by dragging with pointer or touch gestures and animating the transition.

### Graphics & Multimedia

- [Single Element Enter-Update-Exit Animators](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/ui-motion-frameworks/enter-animations/single-element-enter-update-exit-animators.md) — Transitions a single element through enter, update, and leave states using declarative configuration objects. ([source](https://cdn.jsdelivr.net/gh/sghall/react-move@master/README.md))
- [Custom Interpolation Functions](https://awesome-repositories.com/f/graphics-multimedia/value-interpolation-engines/custom-interpolation-functions.md) — Ships custom interpolation functions for animating colors, paths, and transforms beyond numeric values.
- [Collapsible Transition Animations](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/programmatic-animation-apis/state-transition-animators/collapsible-transition-animations.md) — Animates the expansion and collapse of tree nodes with smooth transitions and configurable timing per node. ([source](https://react-move-docs.netlify.app/demos/collapsible-tree))

### Data & Databases

- [Animated State Namespaces](https://awesome-repositories.com/f/data-databases/application-state-management/nested-state-management/animated-state-namespaces.md) — Organizes animated attributes into nested namespaces for cleaner state management during transitions.
- [UI List Reordering](https://awesome-repositories.com/f/data-databases/list-element-reordering/ui-list-reordering.md) — Reorders items in a list by dragging them with a pointer or touch gesture. ([source](https://react-move-docs.netlify.app/demos/draggable-list))