WIP Animations all over site

- Run a transition In for each page
- Involve a "loader" panel on page change
- TODO: tweak the animations and finish the concept

src/animations/Locations.js

@@ -0,0 +1,47 @@
+import anime from 'animejs'
+import ScrollOut from 'scroll-out'
+import { animDuration } from '../utils/store'
+
+
+/*
+** Transition In
+*/
+export const animateIn = () => {
+    // Each location
+    const locations = ScrollOut({
+        targets: '#locations_list .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()
+        }
+    })
+}