withSpring
- React Native course
- Advanced
- Lesson 65/83
- 5 min
Learn spring animations with withSpring.
withSpring
withSpring provides a physical spring animation. It does not go linearly to the target; it bounces like a spring. It is ideal for button presses, card pulls and drag-and-drop that need a natural feel.
Example: offset.value = withSpring(100). Default parameters give a soft spring behavior. With configuration you can adjust damping, stiffness and mass. A low damping bounces more; a high damping settles with less bounce.
Spring behavior
The spring animation works by physics rules. The lower the damping the more the spring bounces. stiffness sets the spring stiffness; mass sets the mass of the moving object. For a soft card animation a low stiffness and medium damping are common.
Example: withSpring(100, { damping: 10, stiffness: 100 }). This makes the card reach the end and bounce a bit. damping: 30 bounces less; damping: 5 bounces a lot. Finding the right feel requires playing with the values.
Practice A withSpring animation
Import withSpring from react-native-reanimated. Write offset.value = withSpring(100, { damping: 10 }). Make a spring animation with damping 10 to 100.
Starter code
import React from 'react';
import { useSharedValue } from 'react-native-reanimated';
export function useSpringMove() {
const offset = useSharedValue(0);
function run() {
// go to 100 with damping 10 using withSpring
}
return { offset, run };
}Sample solution
import React from 'react';
import { useSharedValue, withSpring } from 'react-native-reanimated';
export function useSpringMove() {
const offset = useSharedValue(0);
function run() {
offset.value = withSpring(100, { damping: 10 });
}
return { offset, run };
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the withSpring parts
| Term | Meaning |
|---|---|
withSpring |
Spring animation |
damping |
Damping |
stiffness |
Stiffness |
mass |
Mass |
2 Write the damping value
withSpring(100, { damping: ____, stiffness: 100 })withSpring(100, { damping: 10, stiffness: 100 })Explanation: 10 is a numeric damping value.
3 When is withSpring preferred?
- When a fixed duration is needed
- When a natural feel is needed Correct answer
- When no animation is wanted
- Only for text changes
Explanation: withSpring is preferred for a natural feel.