Animating Multiple Properties in Parallel and Sequence
Compose animations with Animated.parallel to run them simultaneously and Animated.sequence to chain them one after another for complex entry animations.
Composing Complex Animations
Real UI animations are rarely a single value changing in isolation. A modal might slide up and fade in at the same time. A success icon might bounce in, then a label slides in after. React Native's Animated API provides composition helpers that let you orchestrate multiple animations working together: Animated.parallel, Animated.sequence, Animated.stagger, and Animated.delay.
These composition methods return animation objects that can be started, stopped, and even nested inside each other for complex multi-step effects.
Animated.parallel: Simultaneous Animations
Animated.parallel takes an array of animations and runs them all at the same time. When all animations in the array complete, the parallel group is done. This is the right choice when multiple properties should change together — for example, fading in while sliding up.
By default, if one animation in a parallel group stops (e.g., due to an interruption), all others stop too. You can override this with { stopTogether: false } as the second argument.
const opacity = useRef(new Animated.Value(0)).current;
const translateY = useRef(new Animated.Value(50)).current;
Animated.parallel([
Animated.timing(opacity, {
toValue: 1,
duration: 400,
useNativeDriver: true,
}),
Animated.timing(translateY, {
toValue: 0,
duration: 400,
useNativeDriver: true,
}),
]).start();All lessons in this course
- Animated.Value and Animated.View
- Spring and Decay Animations
- Animating Multiple Properties in Parallel and Sequence
- useNativeDriver for 60fps Animations