Fix Locations reveal

src/animations/Locations.js

@@ -7,40 +7,37 @@ import { animDurationLong } from 'utils/store'
 ** Transition In
 */
 export const animateIn = scope => {
-    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) {
-            tl.restart()
+            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)
         }
     })
 }