react-spring

react-spring is an animation library for React, the popular JavaScript framework for building user interfaces. It solves the problem of making animations feel natural and fluid rather than mechanical. Most animation systems work by moving something from point A to point B over a fixed duration. react-spring instead uses spring physics — the same math that describes how a physical spring behaves — so elements overshoot slightly and settle in a way that feels alive rather than robotic.

The way it works is through React hooks (reusable logic you attach to your components). You describe where something should start and where it should end up, and the library handles all the in-between frames automatically, interpolating values like opacity, position, size, or color using the spring model. You can control whether the animation runs automatically, trigger it in response to user interaction, or drive it imperatively from your own code.

It works across multiple rendering targets: standard web (react-dom), mobile (react-native), 3D scenes (react-three-fiber), and canvas-based renderers (react-konva and react-zdog).

You would use this when you want UI elements — menus, cards, modals, transitions between pages — to feel smooth and physical rather than flat and instant. It is written in TypeScript and installed as an npm package.