Locations: Add delay between each location reveal

src/animations/Locations.js

@@ -2,42 +2,53 @@ import anime from 'animejs'
 import ScrollOut from 'scroll-out'
 import { animDurationLong } from 'utils/store'
 
+// Variables
+let delay = 0
+
 
 /*
 ** Transition In
 */
 export const animateIn = scope => {
     // Each location (reveal on scroll)
-    const locations = ScrollOut({
-        targets: scope.querySelectorAll('.location'),
-        onShown: el => {
-            // Image
-            anime({
-                targets: el.querySelector('img'),
-                scale: [1.3, 1],
-                opacity: [0, 1],
-                easing: 'easeOutQuart',
-                duration: 1800,
-                delay: 100
-            })
+    scope.querySelectorAll('.location').forEach(location => {
+        console.log(delay)
 
-            // Name
-            anime({
-                targets: el.querySelector('h3'),
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                duration: 600,
-                delay: 300
-            })
+        const tl = anime.timeline({
+            easing: 'easeOutQuart',
+            duration: 600,
+            autoplay: false,
+            delay
+        })
 
-            // Country
-            anime({
-                targets: el.querySelector('p'),
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                duration: 600,
-                delay: 550
-            })
-        }
+        // Image
+        tl.add({
+            targets: location.querySelector('img'),
+            scale: [1.3, 1],
+            opacity: [0, 1],
+            duration: 1800
+        }, 100)
+
+        // Name
+        tl.add({
+            targets: location.querySelector('h3'),
+            translateY: ['100%', 0]
+        }, 150)
+
+        // Country
+        tl.add({
+            targets: location.querySelector('p'),
+            translateY: ['100%', 0]
+        }, 200)
+
+        // Scroll reveal
+        ScrollOut({
+            once: true,
+            targets: location,
+            onShown: () => tl.restart()
+        })
+
+        // Increase delay between locations
+        delay += 80
     })
 }