// the find
chenglou/react-motion
A spring that solves your animation problems.
react-motion gives React components spring-physics animation through a small set of render-prop components: Motion for a single value, StaggeredMotion for springs chained off each other, and TransitionMotion for animating items in and out of a list. It is for React developers who would rather not pick durations and easing curves, and who want interrupted animations to behave sensibly. The last push was in January 2024, so treat it as a settled library rather than an active one.
Springs instead of durations mean an interrupted animation carries its current velocity into the new target, which is the real reason to reach for this over CSS transitions. TransitionMotion's willLeave hook keeps an unmounting item in the tree while its style animates to a target, and removes it only at rest. Exit animation is the hard part of React animation, and this handles it without wrapping every child. StaggeredMotion makes each spring's destination the previous spring's interpolated value, so the stagger comes out of the physics instead of hand-tuned delays. The surface is five exports and a handful of config fields with no hooks or context to learn, and the Flow type file doubles as readable documentation.
The last push was January 2024, and the build badge points at travis-ci.org, which has been retired, so check the open issues before building a product on it. Each animation frame goes through setState and re-runs the children function, so a heavy subtree under Motion re-renders at 60fps; profile it before wrapping a large list. The API is render-prop only and the examples still use createReactClass, which suits older codebases but feels awkward in a hooks-first app, since there is no hook form to call inside your own component. There is no duration option by design, so a designer's 300ms spec becomes a stiffness and damping pair found by eye, and onRest exists only on Motion, not on StaggeredMotion or TransitionMotion.