How to Manage Multiple Animations in React Native

This is the eighth part of react native animation tutorial series. In this blog post, let’s see how to manage multiple animations in react native. There are three Animated methods for this sequence(), parallel(), and stagger().

The sequence() method accepts an array of multiple animations and runs them one after another, ie sequentially.

Animated.sequence([
      Animated.timing(initialMove, {
        toValue: endMove,
        duration: duration,
        useNativeDriver: true,
      }),
      Animated.timing(initialOpacity, {
        toValue: endOpacity,
        duration: duration,
        useNativeDriver: true,
      }),
    ]).start();

Following is the complete react native example where the fading animation occurs only after the transform animation.

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

const Sequence = () => {
  const initialOpacity = useRef(new Animated.Value(1)).current;
  const initialMove = useRef(new Animated.Value(0)).current;
  const endOpacity = 0;
  const endMove = 100;
  const duration = 3000;

  useEffect(() => {
    Animated.sequence([
      Animated.timing(initialMove, {
        toValue: endMove,
        duration: duration,
        useNativeDriver: true,
      }),
      Animated.timing(initialOpacity, {
        toValue: endOpacity,
        duration: duration,
        useNativeDriver: true,
      }),
    ]).start();
  }, [initialMove, initialOpacity]);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.square,
          {
            opacity: initialOpacity,
            translateX: initialMove,
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  square: {
    height: 150,
    width: 150,
    backgroundColor: 'red',
  },
});

export default Sequence;

Here’s the output:

The parallel() method accepts an array of animations and starts all of them together, ie parallelly. When one animation ends all other animations are stopped.

Animated.parallel([
      Animated.timing(initialMove, {
        toValue: endMove,
        duration: duration,
        useNativeDriver: true,
      }),
      Animated.timing(initialOpacity, {
        toValue: endOpacity,
        duration: duration,
        useNativeDriver: true,
      }),
    ]).start();

Here’s the full react native example to begin animations parallelly.

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

const Parallel = () => {
  const initialOpacity = useRef(new Animated.Value(1)).current;
  const initialMove = useRef(new Animated.Value(0)).current;
  const endOpacity = 0;
  const endMove = 100;
  const duration = 5000;

  useEffect(() => {
    Animated.parallel([
      Animated.timing(initialMove, {
        toValue: endMove,
        duration: duration,
        useNativeDriver: true,
      }),
      Animated.timing(initialOpacity, {
        toValue: endOpacity,
        duration: duration,
        useNativeDriver: true,
      }),
    ]).start();
  }, [initialMove, initialOpacity]);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.square,
          {
            opacity: initialOpacity,
            translateX: initialMove,
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  square: {
    height: 150,
    width: 150,
    backgroundColor: 'red',
  },
});

export default Parallel;

Thus, the fade animation and transform animation occur simultaneously.

The stagger() method may cause overlapping animation but it is used to start animations in sequence with successive delays.

 Animated.stagger(1000, [
      Animated.timing(initialMove, {
        toValue: endMove,
        duration: duration,
        useNativeDriver: true,
      }),
      Animated.timing(initialOpacity, {
        toValue: endOpacity,
        duration: duration,
        useNativeDriver: true,
      }),
    ]).start();

Following is the full example of using Animated stagger() method.

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

const Stagger = () => {
  const initialOpacity = useRef(new Animated.Value(1)).current;
  const initialMove = useRef(new Animated.Value(0)).current;
  const endOpacity = 0;
  const endMove = 100;
  const duration = 5000;

  useEffect(() => {
    Animated.stagger(1000, [
      Animated.timing(initialMove, {
        toValue: endMove,
        duration: duration,
        useNativeDriver: true,
      }),
      Animated.timing(initialOpacity, {
        toValue: endOpacity,
        duration: duration,
        useNativeDriver: true,
      }),
    ]).start();
  }, [initialMove, initialOpacity]);

  return (
    <View style={styles.container}>
      <Animated.View
        style={[
          styles.square,
          {
            opacity: initialOpacity,
            translateX: initialMove,
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  square: {
    height: 150,
    width: 150,
    backgroundColor: 'red',
  },
});

export default Stagger;

Here’s the output: