chenglou/react-motion

React-Motion is a JavaScript library for adding animations to web applications built with React. Instead of telling an element exactly how long to animate and what path to follow, you describe the animation using "spring physics", the same principles that govern how a real spring moves. You set two values called stiffness and damping, and the library calculates the natural, smooth motion automatically. The core concept is that you don't hard-code timings or easing curves (those are the math formulas that control how an animation speeds up and slows down). Instead, you configure a virtual spring by choosing how stiff or bouncy it should be. React-Motion provides handy presets like "gentle" or "wobbly" so you can pick a feel without worrying about the math. The library then smoothly transitions any numeric value, position, size, opacity, between a starting point and a destination. It offers three main building blocks. The basic Motion component animates a single element. StaggeredMotion animates a list of related items where each item's movement depends on the one before it, creating a natural cascading effect. TransitionMotion handles elements that are appearing or disappearing from the page, giving them smooth entrance and exit animations. Someone would reach for this library when building polished web interfaces where standard CSS transitions feel too rigid or choppy. Demos in the README include draggable lists, chat bubbles, photo galleries, and water ripples, all cases where physics-based movement looks more natural than a fixed-duration transition. It works with both React for web and React-Native for mobile apps. The library is written in JavaScript and installed via npm.