@react-spring/web

Spring-physics based animation library for React — fluid, interruptible motion instead of rigid durations.

@react-spring/web

React

Spring-physics based animation library for React — fluid, interruptible motion instead of rigid durations.

npmGitHubDocs

Fit

Bundle (gzip)

20.1 kB

52.4 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Duration-based animations feel mechanical, and they snap awkwardly when interrupted mid-flight (think a menu the user reopens before it finished closing). Coordinating natural-feeling motion tied to React state usually means reaching for imperative hacks.

What It Does

React Spring models animations on real spring physics, so values ease toward their target with momentum and interruptions blend smoothly. Hooks like useSpring and useTransition bind animated values directly to React state and mounting/unmounting, keeping motion declarative.

Installation

bash
npm install @react-spring/web

Usage Example

jsx
import { useSpring, animated } from '@react-spring/web';

export function FadeCard({ open }) {
  const styles = useSpring({
    opacity: open ? 1 : 0,
    transform: open ? 'translateY(0px)' : 'translateY(20px)',
  });

  return <animated.div style={styles}>Hello, spring!</animated.div>;
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.