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.

React Spring uses physics-based springs that calculate duration from mass, tension, and friction, producing interruptible motion that preserves velocity. Framer Motion uses a declarative variant and timeline approach better suited for choreographed multi-step sequences.

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 the transitioning styles applied.

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.

Excessive bounce means the spring is under-damped, so increase the friction value or use the config.stiff preset. You can also set clamp: true to prevent overshoot entirely, or compute critical damping as 2 times the square root of tension times mass.

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 by checking the media query and toggling the global flag.