Spring and decay animations in React Native

Introduction

Spring and decay animations help make app movements feel natural and smooth, like real objects moving and slowing down.

When you want a button or object to bounce back after being dragged.

To create a smooth slowing down effect after a swipe gesture.

When animating a view to move with a springy effect instead of a straight line.

To simulate natural physics in UI animations for better user experience.

Syntax

React Native

import { Animated } from 'react-native';

// Spring animation
Animated.spring(animatedValue, {
  toValue: number,
  friction: number, // controls bounciness
  tension: number,  // controls speed
  useNativeDriver: true
}).start();

// Decay animation
Animated.decay(animatedValue, {
  velocity: number, // initial speed
  deceleration: number, // rate of slowing down
  useNativeDriver: true
}).start();

Animated.spring creates a spring-like motion that bounces to the target value.

Animated.decay starts with a velocity and slows down gradually, like an object losing speed.

Examples

This makes the animated value move to 100 with a spring effect that is moderately bouncy and fast.

React Native

Animated.spring(this.state.animValue, {
  toValue: 100,
  friction: 5,
  tension: 40,
  useNativeDriver: true
}).start();

This starts the animation with speed 1 and slows down slowly, simulating natural slowing.

React Native

Animated.decay(this.state.animValue, {
  velocity: 1,
  deceleration: 0.997,
  useNativeDriver: true
}).start();

Sample App

This app shows a green box that moves horizontally. Press "Start Spring" to see it bounce to the right. Press "Start Decay" to see it slow down moving left from the right side.

React Native

import React, { useRef } from 'react';
import { View, Button, Animated, StyleSheet } from 'react-native';

export default function SpringDecayExample() {
  const animValue = useRef(new Animated.Value(0)).current;

  const startSpring = () => {
    Animated.spring(animValue, {
      toValue: 150,
      friction: 3,
      tension: 40,
      useNativeDriver: true
    }).start();
  };

  const startDecay = () => {
    animValue.setValue(150); // start from 150
    Animated.decay(animValue, {
      velocity: -1.5,
      deceleration: 0.997,
      useNativeDriver: true
    }).start();
  };

  return (
    <View style={styles.container}>
      <Animated.View
        style={[styles.box, { transform: [{ translateX: animValue }] }]}
        accessibilityLabel="Animated box"
      />
      <View style={styles.buttons}>
        <Button title="Start Spring" onPress={startSpring} accessibilityLabel="Start spring animation button" />
        <Button title="Start Decay" onPress={startDecay} accessibilityLabel="Start decay animation button" />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: '#4CAF50',
    borderRadius: 8
  },
  buttons: {
    marginTop: 30,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around'
  }
});

Important Notes

Always set useNativeDriver: true for better performance on animations.

Adjust friction and tension in spring to control bounce and speed.

Decay animations need an initial velocity to start moving.

Summary

Spring animations create bouncy, natural movements.

Decay animations simulate slowing down after a quick start.

Use these animations to make your app feel smooth and alive.