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.

Practice

1. What is the main purpose of a spring animation in React Native?

easy

A. To create a bouncy and natural movement effect

B. To instantly change a value without animation

C. To simulate a slow fade out effect

D. To repeat an animation infinitely

Solution

1. Step 1: Understand spring animation behavior

   Spring animations mimic real-world springs, causing bouncy, natural movements.

2. Step 2: Compare with other animation types

   Unlike decay or timing animations, spring animations create a bounce effect.

3. Final Answer:

   To create a bouncy and natural movement effect -> Option A

4. Quick Check:

   Spring animation = bouncy movement [OK]

Hint: Spring = bounce and natural movement [OK]

Common Mistakes:

• Confusing spring with decay animation
• Thinking spring is for instant changes
• Assuming spring repeats infinitely

2. Which of the following is the correct way to start a spring animation using React Native's Animated API?

easy

A. Animated.decay(value, {toValue: 1}).start()

B. Animated.spring(value, {duration: 1000}).run()

C. Animated.timing(value, {toValue: 1}).run()

D. Animated.spring(value, {toValue: 1}).start()

Solution

1. Step 1: Identify correct method for spring animation

   The method is Animated.spring with parameters including toValue and then .start() to begin.

2. Step 2: Check method usage and syntax

   Animated.decay is for decay animations, .run() is not a valid method, and duration is not used in spring.

3. Final Answer:

   Animated.spring(value, {toValue: 1}).start() -> Option D

4. Quick Check:

   Use Animated.spring(...).start() for spring animation [OK]

Hint: Use .start() to begin spring animation [OK]

Common Mistakes:

• Using .run() instead of .start()
• Confusing decay with spring method
• Adding duration to spring config

3. What will happen when this code runs?

const anim = new Animated.Value(0);
Animated.decay(anim, {velocity: 3, deceleration: 0.997}).start();
anim.addListener(({value}) => console.log(value));

medium

A. The value will increase quickly then slow down gradually

B. The value will jump instantly to 3 and stop

C. The value will decrease to zero immediately

D. The animation will loop forever without stopping

Solution

1. Step 1: Understand decay animation behavior

   Decay animation starts with a velocity and slows down gradually due to deceleration.

2. Step 2: Analyze given parameters

   Velocity 3 means value increases fast initially, deceleration 0.997 slows it down over time.

3. Final Answer:

   The value will increase quickly then slow down gradually -> Option A

4. Quick Check:

   Decay animation = fast start + slow stop [OK]

Hint: Decay = fast start, then slow down [OK]

Common Mistakes:

• Thinking decay jumps instantly to velocity
• Assuming decay decreases value immediately
• Believing decay loops infinitely

4. Identify the error in this spring animation code:

const anim = new Animated.Value(0);
Animated.spring(anim, {toValue: 1, velocity: 5}).run();

medium

A. Missing toValue property in spring config

B. Using .run() instead of .start() to begin animation

C. Velocity is not a valid spring config property

D. Animated.Value should be initialized with 1

Solution

1. Step 1: Check method to start animation

   Animated animations use .start() to begin, not .run().

2. Step 2: Verify spring config properties

   toValue and velocity are valid properties; initial value 0 is fine.

3. Final Answer:

   Using .run() instead of .start() to begin animation -> Option B

4. Quick Check:

   Use .start() to run animations [OK]

Hint: Animations start with .start(), not .run() [OK]

Common Mistakes:

• Using .run() instead of .start()
• Removing toValue from config
• Initializing Animated.Value incorrectly

5. You want to create a button that moves right with a spring animation and then slows to stop with a decay animation when released. Which sequence of code correctly achieves this behavior?

hard

A. Animated.spring(anim, {toValue: 100, velocity: 2}).start()

B. Animated.decay(anim, {velocity: 2}).start(() => Animated.spring(anim, {toValue: 100}).start())

C. Animated.spring(anim, {toValue: 100}).start(() => Animated.decay(anim, {velocity: 2}).start())

D. Animated.timing(anim, {toValue: 100, duration: 500}).start(() => Animated.decay(anim, {velocity: 2}).start())

Solution

1. Step 1: Understand desired animation sequence

   First move right with spring (bouncy), then slow down with decay on release.

2. Step 2: Analyze options for correct order and methods

   Animated.spring(anim, {toValue: 100}).start(() => Animated.decay(anim, {velocity: 2}).start()) runs spring first, then decay in callback, matching desired sequence.

3. Step 3: Check other options

   Animated.spring(anim, {toValue: 100, velocity: 2}).start() performs only spring without decay. Animated.decay(anim, {velocity: 2}).start(() => Animated.spring(anim, {toValue: 100}).start()) (Animated.decay(anim, {velocity: 2}).start(() => Animated.spring(anim, {toValue: 100}).start())) reverses order. Animated.timing(anim, {toValue: 100, duration: 500}).start(() => Animated.decay(anim, {velocity: 2}).start()) uses timing instead of spring.

4. Final Answer:

   Animated.spring(anim, {toValue: 100}).start(() => Animated.decay(anim, {velocity: 2}).start()) -> Option C

5. Quick Check:

   Spring then decay = move then slow [OK]

Hint: Run spring first, then decay in callback [OK]

Common Mistakes:

• Running decay before spring
• Performing only spring without decay
• Using timing instead of spring for bounce