Spring and Decay Animations
Use Animated.spring to create bouncy physics-based motion, tune tension and friction parameters, and apply Animated.decay for momentum-based scrolling effects.
Beyond Linear: Physics-Based Motion
Linear timing animations feel mechanical because real-world objects rarely move at a constant speed. Physics-based animations simulate natural forces like springs and momentum, making UI motion feel alive and natural. React Native's Animated API provides two physics engines: Animated.spring for elastic bounce and Animated.decay for momentum-based deceleration.
Choosing the right animation type dramatically affects perceived quality. Timing suits opacity fades; spring suits interactive elements like buttons and cards; decay suits swipe-to-dismiss gestures.
Animated.spring: Bouncy Motion
Animated.spring simulates a spring pulling a value toward a target. The value overshoots the target and oscillates until it settles — the classic bouncy effect. At minimum you provide toValue and useNativeDriver.
Spring animations feel natural for elements that respond to user interaction, such as a button scaling up on press or a modal sliding in from below. The default spring parameters are already tuned to feel good on mobile, but you can customize them.
import { Animated } from 'react-native';
import { useRef } from 'react';
const scale = useRef(new Animated.Value(0)).current;
Animated.spring(scale, {
toValue: 1,
useNativeDriver: true,
}).start();