react-spring

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

★ 29,134 Open GitHub ↗

✌️ A spring physics based React animation library

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<br />

<h1 align="center">react-spring</h1>
<h3 align="center">A spring-physics first animation library <br>giving you flexible tools to confidently cast your ideas</h3>

<br>

<br>

`react-spring` is a cross-platform spring-physics first animation library.

It's as simple as:

```jsx
const styles = useSpring({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
})

<animated.div style={styles} />
```

Just a small bit about us:

- **Cross-Platform**: We support `react-dom` and `react-three-fiber`.
- **Versatile**: Be declarative with your animations or if you prefer, imperative.
- **Spring-Physics First**: By default animation use springs for fluid interactivity, but we support durations with easings as well.

There's a lot more to be had! Give it a try and find out.

## Getting Started

### ⚡️ Jump Start

```shell
# Install the target you need
npm install @react-spring/web
# or, for react-three-fiber
npm install @react-spring/three
```

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

const FadeIn = ({ isVisible, children }) => {
  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    y: isVisible ? 0 : 24,
  })

return <animated.div style={styles}>{children}</animated.div>
}
```

It's as simple as that to create scroll-in animations when value of `isVisible` is toggled.

### 📖 Documentation and Examples

More documentation on the project can be found [here](https://www.react-spring.dev).

Pages contain their own [examples](https://react-spring.dev/hooks/use-spring#demos) which you can check out there, or [open in codesandbox](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/card) for a more in-depth view!

---

## 📣 What others say

## Used by

And [many others...](https://github.com/pmndrs/react-spring/network/dependents)

## Backers

Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our [Opencollective](https://opencollective.com/pmndrs).

## Contributors

This project exists thanks to all the people who contribute.

react-spring

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README