Animated.spring
- React Native course
- Intermediate
- Lesson 73/116
- 5 min
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().
Practice Add a spring animation
Use Animated.spring to take fade to 1. Use friction: 7 and useNativeDriver: true; call .start().
Starter code
import React, { useRef } from 'react';
import { Animated } from 'react-native';
export default function Bounce() {
const fade = useRef(new Animated.Value(0)).current;
// Take fade to 1 with spring
return <Animated.View style={{ opacity: fade }} />;
}Sample 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.
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What is the difference between spring and timing?
- spring uses physics parameters Correct answer
- spring takes no time
- spring only changes color
- spring is slower
Explanation: spring uses physics parameters like friction/tension.
2 Write the spring call
Animated.spring(fade, { toValue: 1, ____: 7, useNativeDriver: true }).start();Animated.spring(fade, { toValue: 1, friction: 7, useNativeDriver: true }).start();Explanation: 7 sets the friction; a smaller value bounces more.
3 Match the spring concepts
| Term | Meaning |
|---|---|
spring |
Physics animation |
friction |
Friction |
tension |
Tension |
useNativeDriver |
Native driver |