react-spring-physics

Use the useSpring hook from @react-spring/web with from and to values, then apply the returned springs to an animated component's style prop. Configure the feel with mass, tension, and friction, or use presets like config.wobbly and config.gentle.

Use the useTransition hook with from, enter, and leave style objects plus a keys function to identify items. It returns a render function that wraps each item in an animated.div with spring-driven enter and exit motion.

React Spring uses physics simulation based on mass, tension, and friction, producing interruptible motion that preserves velocity when animations change mid-flight. Duration-based libraries offer predictable timing but feel less natural when interrupted by user input.

Yes, the @react-spring/three package provides animated wrappers for Three.js objects and materials. You can spring-animate properties like scale, position, and color on meshes inside a React Three Fiber Canvas.

The default precision of 0.0001 can cause excessive updates before the spring settles. Increase precision to 0.01 in the config so the animation completes when values are close enough to the target.

Call Globals.assign({ skipAnimation: true }) from @react-spring/web in your test setup to make all animations resolve instantly. This also supports prefers-reduced-motion accessibility requirements.