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/Transition.js

@@ -0,0 +1,61 @@
+import anime from 'animejs'
+import { animDuration, animDurationLong } from '../utils/store'
+
+
+/*
+** Transition In
+*/
+export const animateIn = () => {
+    // Panel itself
+    const transition = anime({
+        targets: '#transition',
+        height: ['100%', '100%'],
+        opacity: [0, 1],
+        duration: 200,
+        delay: 0,
+        easing: 'easeInOutQuart'
+    })
+    // Globe icon
+    const globe = anime({
+        targets: '#transition svg',
+        opacity: [0, 1],
+        duration: 200,
+        delay: 0,
+        easing: 'easeInOutQuart'
+    })
+
+}
+
+
+/*
+** Transition Out
+*/
+export const animateOut = callback => {
+    // Panel itself
+    const transition = anime({
+        targets: '#transition',
+        height: ['100%', 0],
+        duration: animDurationLong,
+        delay: 800,
+        easing: 'easeInOutQuart',
+        complete: callback
+    })
+
+    // Title
+    const title = anime({
+        targets: '#transition .title-location',
+        opacity: 0,
+        duration: 600,
+        delay: 1400,
+        easing: 'easeInOutQuart'
+    })
+
+    // Globe icon
+    const globe = anime({
+        targets: '#transition svg',
+        opacity: 0,
+        duration: 600,
+        delay: 1400,
+        easing: 'easeInOutQuart'
+    })
+}