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({
+    scope.querySelectorAll('.location').forEach(location => {
-        targets: scope.querySelectorAll('.location'),
+        console.log(delay)
-        onShown: el => {
+
+        const tl = anime.timeline({
+            easing: 'easeOutQuart',
+            duration: 600,
+            autoplay: false,
+            delay
+        })
+
         // Image
-            anime({
+        tl.add({
-                targets: el.querySelector('img'),
+            targets: location.querySelector('img'),
             scale: [1.3, 1],
             opacity: [0, 1],
-                easing: 'easeOutQuart',
+            duration: 1800
-                duration: 1800,
+        }, 100)
-                delay: 100
-            })
 
         // Name
-            anime({
+        tl.add({
-                targets: el.querySelector('h3'),
+            targets: location.querySelector('h3'),
-                translateY: ['100%', 0],
+            translateY: ['100%', 0]
-                easing: 'easeOutQuart',
+        }, 150)
-                duration: 600,
-                delay: 300
-            })
 
         // Country
-            anime({
+        tl.add({
-                targets: el.querySelector('p'),
+            targets: location.querySelector('p'),
-                translateY: ['100%', 0],
+            translateY: ['100%', 0]
-                easing: 'easeOutQuart',
+        }, 200)
-                duration: 600,
+
-                delay: 550
+        // Scroll reveal
-            })
+        ScrollOut({
-        }
+            once: true,
+            targets: location,
+            onShown: () => tl.restart()
+        })
+
+        // Increase delay between locations
+        delay += 80
     })
 }