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

@@ -0,0 +1,60 @@
+import anime from 'animejs'
+// import ScrollOut from 'scroll-out'
+import { animDuration } from '../utils/store'
+
+
+/*
+** Transition In
+*/
+export const animateIn = () => {
+    const tl = anime.timeline({
+        duration: 1800,
+        easing: 'easeOutQuart'
+    })
+
+    // Title: Houses
+    tl.add({
+        targets: '.place__title_houses',
+        translateY: ['150%', 0],
+        duration: animDuration
+    })
+    // Title: Of
+    tl.add({
+        targets: '.place__title_of',
+        opacity: [0, 1],
+        duration: 800
+    }, 550)
+    // Title: Place name
+    tl.add({
+        targets: '.place__title_name',
+        translateY: ['150%', 0],
+        duration: animDuration
+    }, 200)
+
+    // Switcher link
+    tl.add({
+        targets: '.place__title .button-control',
+        scale: [0.95, 1],
+        opacity: [0, 1],
+        duration: animDuration
+    }, 700)
+
+    // Illustration
+    tl.add({
+        targets: '.place__illustration',
+        scale: [1.075, 1],
+        opacity: [0, 1],
+        duration: animDuration
+    }, 200)
+
+    // Description
+    tl.add({
+        targets: '.place__description',
+        opacity: [0, 1],
+        translateY: [24, 0],
+        duration: animDuration
+    }, 800)
+
+    // Play
+    tl.play()
+}