Animated.spring

Learn spring animations with Animated.spring.

Animated.spring

Animated.spring is a physics-based animation. Instead of a duration like timing, it takes physics parameters such as friction and tension. The result is a realistic spring motion.

Example: Animated.spring(fade, { toValue: 1, friction: 7, useNativeDriver: true }).start(). The smaller the friction, the more it bounces. It is started with .start().

Exercise Add a spring animation

Use Animated.spring to take fade to 1. Use friction: 7 and useNativeDriver: true; call .start().

Show example solution

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

export default function Bounce() {
  const fade = useRef(new Animated.Value(0)).current;
  Animated.spring(fade, {
    toValue: 1,
    friction: 7,
    useNativeDriver: true,
  }).start();
  return <Animated.View style={{ opacity: fade }} />;
}

Spring settings

friction sets the friction; a smaller value means more bouncing. tension sets the spring strength; a larger value gives a stiffer motion. Together they tune the feel of the motion.

useNativeDriver: true is again required for smoothness. Unlike timing, spring does not take a duration; the physics slows down and stops on its own.

Test yourself

What is the difference between spring and timing?
- spring uses physics parameters
- spring takes no time
- spring only changes color
- spring is slower
Show answer

spring uses physics parameters — spring uses physics parameters like friction/tension.

Write the spring call

Animated.spring(fade, { toValue: 1, ____: 7, useNativeDriver: true }).start();

Show answer

Animated.spring(fade, { toValue: 1, friction: 7, useNativeDriver: true }).start();

Match the spring concepts

spring

Physics animation
friction

Friction
tension

Tension
useNativeDriver

Native driver

Next lesson: interpolate

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies