React Spring

Physics-based animation library for React

animation

Natural feeling animations with spring physics. Cross-platform.

ReactAnimationPhysicsSpring

🎮 Playground

import { useSpring, animated } from "@react-spring/web"

export default function Demo() {
  const styles = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 }
  })
  
  return <animated.div style={styles}>Hello</animated.div>
}

Open Sandbox

Use cases

•Interactive UIs
•Data visualizations
•Games

Good for

✓Physics-accurate animations
✓Cross-platform apps
✓Complex gesture handling

Not good for

✗Simple CSS transitions
✗Timeline-based animations

Installation

$ npm install @react-spring/web

Example

import { useSpring, animated } from "@react-spring/web"

export default function Demo() {
  const styles = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 }
  })
  
  return <animated.div style={styles}>Hello</animated.div>
}

Comparison

"More physics-accurate than Framer Motion, steeper learning curve but more control."

Trust Metrics

28.5K

GitHub Stars

1.5M

Weekly Downloads

Last Commit:last year

Used by

UberDiscordShopify

View on GitHub View on npm