Use parallel instead of stagger

Author: phamfoo

src/Bounce.tsx

@@ -20,13 +20,13 @@ export default class Bounce extends React.Component<SpinnerProps> {
     }
     return (
       <AnimationContainer
-        animation={Animated.stagger(
-          1000,
-          this.values.map(value =>
+        animation={Animated.parallel(
+          this.values.map((value, index) =>
             anim({
               duration: 2000,
               value: value,
               keyframes: [0, 45, 55, 100],
+              delay: index * 1000,
             })
           )
         )}

src/Chase.tsx

@@ -22,23 +22,23 @@ export default class Chase extends React.Component<SpinnerProps> {
     return (
       <AnimationContainer
         animation={Animated.parallel([
-          Animated.stagger(
-            100,
-            this.chaseDotValues.map(value =>
+          Animated.parallel(
+            this.chaseDotValues.map((value, index) =>
               anim({
                 duration: 2000,
                 value: value,
                 keyframes: [0, 80, 100],
+                delay: index * 100,
               })
             )
           ),
-          Animated.stagger(
-            100,
-            this.chaseDotBeforeValues.map(value =>
+          Animated.parallel(
+            this.chaseDotBeforeValues.map((value, index) =>
               anim({
                 duration: 2000,
                 value: value,
                 keyframes: [0, 50, 100],
+                delay: index * 100,
               })
             )
           ),

src/Circle.tsx

@@ -19,13 +19,13 @@ export default class Circle extends React.Component<SpinnerProps> {
     }
     return (
       <AnimationContainer
-        animation={Animated.stagger(
-          100,
-          this.values.map(value =>
+        animation={Animated.parallel(
+          this.values.map((value, index) =>
             anim({
               duration: 1200,
               value: value,
               keyframes: [0, 40, 80, 100],
+              delay: index * 100,
             })
           )
         )}

src/CircleFade.tsx

@@ -19,13 +19,13 @@ export default class CircleFade extends React.Component<SpinnerProps> {
     }
     return (
       <AnimationContainer
-        animation={Animated.stagger(
-          100,
-          this.values.map(value =>
+        animation={Animated.parallel(
+          this.values.map((value, index) =>
             anim({
               duration: 1200,
               value: value,
               keyframes: [0, 39, 40, 100],
+              delay: index * 100,
             })
           )
         )}

src/Flow.tsx

@@ -13,14 +13,14 @@ export default class Flow extends React.Component<SpinnerProps> {
 
     return (
       <AnimationContainer
-        animation={Animated.stagger(
-          150,
-          this.values.map(value =>
+        animation={Animated.parallel(
+          this.values.map((value, index) =>
             anim({
               duration: 1400,
               value: value,
               easing: Easing.bezier(0.455, 0.03, 0.515, 0.955),
               keyframes: [0, 40, 80, 100],
+              delay: index * 150,
             })
           )
         )}

src/Wave.tsx

@@ -13,13 +13,13 @@ export default class Wave extends React.Component<SpinnerProps> {
 
     return (
       <AnimationContainer
-        animation={Animated.stagger(
-          100,
-          this.values.map(value =>
+        animation={Animated.parallel(
+          this.values.map((value, index) =>
             anim({
               duration: 1200,
               value: value,
               keyframes: [0, 20, 40, 100],
+              delay: index * 100,
             })
           )
         )}