Animated.spring defines a way to transition an Animated.Value based on tension and friction of a spring. The tension defines how much energy the spring has, and the friction defines how quickly that energy will dissipate. Based upon the spring formula the Animated.Value will bounce around like a spring until it stops.

Because this is a spring it means that the Animated.Value will overshoot the toValue that you have specified until settling to the toValue. This is unlike Animated.timing which will not exceed the toValue you specified unless you provided an easing that caused the value to overshoot.

Spring is the best way to simulate real physical motion in an animation. It allows for you to build out more realistic animations without having to define a duration, or guess the appropriate duration for a particular animation.

Some examples

Loose bouncy spring

Animated.spring(this._animation, {
  toValue: 100,
  friction: 2,
  tension: 140,
}).start();

High Friction not bouncy spring

Animated.spring(this._animation, {
  toValue: 100,
  friction: 15,
  tension: 140,
}).start();

You can apply the same amount of tension energy but a higher friction will cause the spring to stop faster.

Live Demo