# pmndrs/react-spring

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/pmndrs-react-spring).**

29,042 stars · 1,214 forks · TypeScript · mit

## Links

- GitHub: https://github.com/pmndrs/react-spring
- Homepage: http://www.react-spring.dev/
- awesome-repositories: https://awesome-repositories.com/repository/pmndrs-react-spring.md

## Topics

`animation-library` `react` `react-spring` `spring-physics` `springs`

## Description

React-spring is a physics-based animation library designed to create fluid, natural motion for user interface elements and three-dimensional objects. It functions as a declarative motion framework that maps state changes to animated property values, utilizing spring physics—defined by mass, tension, and friction—rather than traditional time-based easing functions to calculate transitions.

The library distinguishes itself through a rendering-agnostic architecture that decouples animation logic from specific UI frameworks, allowing for consistent application across web interfaces, 3D scenes, and custom environments. It provides both declarative hooks for standard component transitions and imperative controllers that allow developers to trigger, pause, or orchestrate complex motion sequences directly, bypassing standard rendering cycles for high-performance visual updates.

Beyond core animation, the project includes a comprehensive suite of tools for managing layout-aware transitions, list animations, and scroll-driven interactions. It supports advanced orchestration patterns such as staggered element trails and sequential animations, while maintaining accessibility through automatic detection of system-level reduced motion settings. The library is built to handle isomorphic execution, ensuring consistent behavior across both server-side and client-side rendering environments.

## Tags

### User Interface & Experience

- [Declarative UI Motion Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-ui-motion-frameworks.md) — Maps state changes to animated property values for seamless interface transitions using hooks and components.
- [Physics-Based Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/physics-based-animation-libraries.md) — Creates natural and fluid motion for interface elements by using spring physics instead of traditional time-based easing functions.
- [Component Animation Hooks](https://awesome-repositories.com/f/user-interface-experience/component-animation-hooks.md) — Provides hooks that accept configuration objects to animate component properties for user interface elements. ([source](http://www.react-spring.dev/docs/components/use-spring))
- [Declarative Animation Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-animation-frameworks.md) — Manages entry, exit, and layout changes of interface elements through a declarative system.
- [Animation Controllers](https://awesome-repositories.com/f/user-interface-experience/animation-controllers.md) — Coordinates multiple spring values through a central controller to orchestrate complex animation sequences. ([source](http://www.react-spring.dev/docs/concepts/controllers-and-springs))
- [Animation Hooks](https://awesome-repositories.com/f/user-interface-experience/animation-hooks.md) — Manages animation lifecycles and spring configurations through hooks that synchronize motion with state changes.
- [Cross-Platform Animation Engines](https://awesome-repositories.com/f/user-interface-experience/cross-platform-animation-engines.md) — Provides a rendering-agnostic motion core that supports web interfaces, 3D scenes, and custom environments.
- [Accessibility Motion Controls](https://awesome-repositories.com/f/user-interface-experience/accessibility-motion-controls.md) — Identifies system-level accessibility settings to automatically disable or simplify motion effects. ([source](http://www.react-spring.dev/docs/utilities/use-reduced-motion))
- [High-Performance Interpolation](https://awesome-repositories.com/f/user-interface-experience/high-performance-interpolation.md) — Provides specialized containers to interpolate values directly to the screen for high-performance visual transitions. ([source](http://www.react-spring.dev/docs/concepts/animated-elements))
- [Physics-Based Animation Configurations](https://awesome-repositories.com/f/user-interface-experience/physics-based-animation-configurations.md) — Allows adjusting mass, tension, and friction settings to define natural and responsive motion behavior. ([source](http://www.react-spring.dev/docs/advanced/config))
- [Physics Engines](https://awesome-repositories.com/f/user-interface-experience/physics-engines.md) — Calculates animation frames by solving differential equations for mass, tension, and friction to simulate natural motion.
- [Imperative Animation APIs](https://awesome-repositories.com/f/user-interface-experience/imperative-animation-apis.md) — Supports triggering animation commands directly to modify motion states instantly without forcing interface re-renders. ([source](http://www.react-spring.dev/docs/concepts/imperative-api))
- [Lifecycle Transition Trackers](https://awesome-repositories.com/f/user-interface-experience/lifecycle-transition-trackers.md) — Monitors mounting and unmounting of elements to automatically trigger entry and exit animations based on data changes.
- [List Transition Animations](https://awesome-repositories.com/f/user-interface-experience/list-transition-animations.md) — Tracks arrays of data to animate items entering and leaving the screen with specific transition styles. ([source](http://www.react-spring.dev/docs/components/use-transition))
- [Scroll-Driven Animation Tools](https://awesome-repositories.com/f/user-interface-experience/scroll-driven-animation-tools.md) — Links visual effects and element displacements to the user scroll position to create immersive navigation experiences.
- [Scroll-Driven Interaction Layers](https://awesome-repositories.com/f/user-interface-experience/scroll-driven-interaction-layers.md) — Links visual displacements and element transitions directly to user scroll positions and viewport visibility.
- [Scroll-Linked Animation Utilities](https://awesome-repositories.com/f/user-interface-experience/scroll-linked-animation-utilities.md) — Links visual motion to the scroll position of a page or container to create interactive effects. ([source](http://www.react-spring.dev/docs/utilities/use-scroll))
- [3D Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/3d-animation-libraries.md) — Facilitates smooth 3D object transitions using spring physics for dynamic responsiveness. ([source](http://www.react-spring.dev/docs/guides/react-three-fiber))
- [Animation Orchestrators](https://awesome-repositories.com/f/user-interface-experience/animation-orchestrators.md) — Coordinates multiple independent animations into complex, synchronized, or staggered sequences.
- [Imperative Animation Controllers](https://awesome-repositories.com/f/user-interface-experience/imperative-animation-controllers.md) — Provides direct control over animation playback and state transitions outside of the standard declarative rendering flow.
- [Layout Dimension Animators](https://awesome-repositories.com/f/user-interface-experience/layout-dimension-animators.md) — Measures interface element sizes and applies spring-based motion to create smooth transitions during layout changes. ([source](http://www.react-spring.dev/docs/utilities/use-resize))
- [Multi-Spring Orchestrators](https://awesome-repositories.com/f/user-interface-experience/multi-spring-orchestrators.md) — Manages multiple independent spring animations simultaneously by defining configurations for each spring. ([source](http://www.react-spring.dev/docs/components/use-springs))
- [Sequential Animation Orchestrators](https://awesome-repositories.com/f/user-interface-experience/sequential-animation-orchestrators.md) — Orchestrates multiple animation hooks to run in sequence by triggering subsequent animations after previous ones finish. ([source](http://www.react-spring.dev/docs/components/use-chain))

### Software Engineering & Architecture

- [Cross-Platform Rendering Abstractions](https://awesome-repositories.com/f/software-engineering-architecture/cross-platform-rendering-abstractions.md) — Decouples animation logic from specific UI frameworks to allow motion application across diverse rendering targets.