Course Menu

Stagger

Staggering animations is a great way to have consistent animations with a small space in between them. Typically the animations are going to be the same but they don't have to be.

One of the best examples of staggered animations is draggable chat heads. Every time the lead head is dragged to a position the others follow suit using the exact same animation path and velocity. Another example is staggering the visibility/rendering of form items, or other elements upon rendering.

Animated.stagger(200, [
  Animated.timing(this._opacityAnimation, {
    toValue: 1,
    duration: 500,
  }),
  Animated.timing(this._positionAnimation, {
    toValue: 0,
    duration: 150,
  }),
]).start();

Live Demo