Page and components animations rework WIP

src/animations/Locations.js

@@ -1,47 +1,46 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { transitionLong } from 'utils/store'
+import { animDurationLong } from 'utils/store'
 
 
 /*
 ** Transition In
 */
 export const animateIn = scope => {
-    // Each location
+    const tl = anime.timeline({
+        autoplay: false,
+        duration: 600,
+        delay: anime.stagger(200),
+        easing: 'easeOutQuart'
+    })
+
+    // Image
+    tl.add({
+        targets: scope.querySelector('img'),
+        scale: [1.3, 1],
+        opacity: [0, 1],
+        duration: 1800,
+        delay: 100
+    })
+
+    // Name
+    tl.add({
+        targets: scope.querySelector('h3'),
+        translateY: ['100%', 0]
+    }, 300)
+
+    // Country
+    tl.add({
+        targets: scope.querySelector('p'),
+        translateY: ['100%', 0]
+    }, 550)
+
+
+    // Each location (reveal on scroll)
     const locations = ScrollOut({
         targets: scope.querySelectorAll('.location'),
         onShown (el) {
-            // Timeline
-            const tl = anime.timeline({
-                autoplay: false,
-                duration: 600,
-                delay: anime.stagger(200),
-                easing: 'easeOutQuart'
-            })
-
-            // Image
-            tl.add({
-                targets: el.querySelector('img'),
-                scale: [1.3, 1],
-                opacity: [0, 1],
-                duration: 1800,
-                delay: 100
-            })
-
-            // Name
-            tl.add({
-                targets: el.querySelector('h3'),
-                translateY: ['100%', 0]
-            }, 300)
-
-            // Country
-            tl.add({
-                targets: el.querySelector('p'),
-                translateY: ['100%', 0]
-            }, 550)
-
-            // Play
-            tl.play()
+            tl.restart()
         }
     })
 }