Course Menu

Combining Multiple Combined Animations

Our delay animation is a great example of a complex animation with multiple combined animations. These can all be nested in any fashion as deep as you want. Including timing, stagger, spring, parallel, delay, sequence, etc. However do not that the start callback will not be called until ALL animations are completed.

So here with our delay animation, these run sequentially. This animation would last for 500 + 300 + 1500 + 500, and then our start would be called.

Animated.sequence([
  Animated.timing(this.state.colorAnimation, {
    toValue: 1,
    duration: 500,
  }),
  Animated.timing(this.state.scaleAnimation, {
    toValue: 2,
    duration: 300,
  }),
  Animated.delay(1500),
  Animated.parallel([
    Animated.timing(this.state.colorAnimation, {
      toValue: 0,
      duration: 500,
    }),
    Animated.timing(this.state.scaleAnimation, {
      toValue: 1,
      duration: 300,
    }),
  ]),
]).start();