⚠️ Fix most animations/transitions performance issues

- Basically add `will-change` to CSS elements to enable GPU animations, less choppy, more sassy
- Use requestAnimationFrame over setTimeout
- Avoid repaints AMAP

src/animations/Locations.js

@@ -11,30 +11,33 @@ export const animateIn = scope => {
     const locations = ScrollOut({
         targets: scope.querySelectorAll('.location'),
         onShown (el) {
-            const tl = anime.timeline({
-                easing: 'easeOutQuart',
-                duration: 600
-            })
-
             // Image
-            tl.add({
+            anime({
                 targets: el.querySelector('img'),
                 scale: [1.3, 1],
                 opacity: [0, 1],
-                duration: 1800
-            }, 100)
+                easing: 'easeOutQuart',
+                duration: 1800,
+                delay: 100
+            })
 
             // Name
-            tl.add({
+            anime({
                 targets: el.querySelector('h3'),
-                translateY: ['100%', 0]
-            }, 300)
+                translateY: ['100%', 0],
+                easing: 'easeOutQuart',
+                duration: 600,
+                delay: 300
+            })
 
             // Country
-            tl.add({
+            anime({
                 targets: el.querySelector('p'),
-                translateY: ['100%', 0]
-            }, 550)
+                translateY: ['100%', 0],
+                easing: 'easeOutQuart',
+                duration: 600,
+                delay: 550
+            })
         }
     })
 }