# React Spring — Physics-Based Animation Library for React

> React Spring is a spring-physics animation library for React that produces fluid, natural-feeling transitions without relying on duration or easing curves.

## Install

Save as a script file and run:

# React Spring — Physics-Based Animation Library for React

## Quick Use
```bash
npm install @react-spring/web
```
```jsx
import { useSpring, animated } from '@react-spring/web';
function FadeIn({ children }) {
  const style = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } });
  return <animated.div style={style}>{children}</animated.div>;
}
```

## Introduction
React Spring uses spring physics to drive animations, producing motion that feels organic rather than mechanically timed. It covers everything from simple opacity fades to complex multi-element orchestrations across React, React Native, and Three.js.

## What React Spring Does
- Animates any numeric CSS or SVG property with spring dynamics
- Provides hooks (useSpring, useSprings, useTrail, useTransition, useChain) for different patterns
- Supports imperative and declarative animation control
- Handles mount/unmount transitions with useTransition
- Interpolates between arbitrary value types including colors and transforms

## Architecture Overview
The library uses a frame-loop that runs outside React's render cycle for performance. Spring values are stored as shared refs and updated each frame via a physics solver. The animated higher-order component subscribes to these values and applies them directly to the DOM, bypassing React re-renders for smooth 60fps output.

## Self-Hosting & Configuration
- Install the target-specific package: @react-spring/web, @react-spring/native, or @react-spring/three
- Configure spring physics with mass, tension, friction, or use named presets
- Use the config prop to tune bounciness and response speed
- Enable the skipAnimation global flag for reduced-motion accessibility
- Pair with @react-spring/parallax for scroll-driven effects

## Key Features
- Spring-physics model eliminates guesswork around duration and easing
- Platform-agnostic core with renderers for DOM, React Native, and Three.js
- useTrail and useChain for staggered and sequenced animation flows
- Lazy evaluation prevents unnecessary calculations on hidden elements
- TypeScript support with strongly typed animated props

## Comparison with Similar Tools
- **Framer Motion** — declarative API with layout animations, but larger bundle
- **GSAP** — timeline-based with fine-grained control, not React-specific
- **CSS transitions** — zero JS overhead but limited to simple property changes
- **Motion One** — small Web Animations API wrapper, fewer orchestration tools
- **AutoAnimate** — zero-config entry/exit animations, less granular control

## FAQ
**Q: How does spring physics differ from easing-based animation?**
A: Springs respond to interruption naturally. If you change the target mid-animation, the spring adjusts velocity continuously instead of restarting from a new curve.

**Q: Does React Spring cause re-renders?**
A: No. Animated values update outside the React tree and apply directly to the DOM.

**Q: Can I animate SVG paths?**
A: Yes. Wrap SVG elements with animated (e.g., animated.path) and interpolate the d attribute.

**Q: Is React Spring compatible with React 18 concurrent mode?**
A: Yes. The library works with concurrent features and Suspense.

## Sources
- https://github.com/pmndrs/react-spring
- https://www.react-spring.dev/

---
Source: https://tokrepo.com/en/workflows/175d228b-41f2-11f1-9bc6-00163e2b0d79
Author: Script Depot