React Native Animation Tutorial Series (Part 8): How to Manage Multiple Animations in React Native

Last Updated on December 15, 2020.

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(this.state.initialMove, {
        toValue: this.state.endMove,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.initialOpacity, {
        toValue: this.state.endOpacity,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
    ]).start();

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

Class Component

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

export default class Sequence extends Component {
  constructor(props) {
    super(props);
    this.state = {
      initialOpacity: new Animated.Value(1),
      initialMove: new Animated.Value(0),
      endOpacity: 0,
      endMove: 100,
      duration: 3000,
    };
  }

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

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

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

Function Component

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

const Sequence = () => {
  const initialOpacity = new Animated.Value(1);
  const initialMove = new Animated.Value(0);
  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, endMove, initialOpacity, endOpacity, duration]);

  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(this.state.initialMove, {
        toValue: this.state.endMove,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.initialOpacity, {
        toValue: this.state.endOpacity,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
    ]).start();

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

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

export default class Parallel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      initialOpacity: new Animated.Value(1),
      initialMove: new Animated.Value(0),
      endOpacity: 0,
      endMove: 100,
      duration: 5000,
    };
  }

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

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

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

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(this.state.initialMove, {
        toValue: this.state.endMove,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
      Animated.timing(this.state.initialOpacity, {
        toValue: this.state.endOpacity,
        duration: this.state.duration,
        useNativeDriver: true,
      }),
    ]).start();

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

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

export default class Delay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      initialOpacity: new Animated.Value(1),
      initialMove: new Animated.Value(0),
      endOpacity: 0,
      endMove: 100,
      duration: 5000,
    };
  }

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

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

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

Here’s the output:

Get the source code of all my react native animation examples given in this tutorial series from this Github repository.