⚠️ 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/viewer.js

@@ -1,35 +1,38 @@
 import anime from 'animejs'
-import { animDuration } from 'utils/store'
+import { animDuration, animDelay } from 'utils/store'
 
 
 /*
 ** Transition In
 */
 export const animateIn = () => {
+    const viewer = document.querySelector('.viewer')
     const tl = anime.timeline({
         easing: 'easeOutQuart',
-        duration: animDuration
-    })
-
-    // Buttons
-    tl.add({
-        targets: '.viewer__top p, .viewer__top .buttons a',
-        translateY: [-32, 0],
-        delay: anime.stagger(150, { start: 600 }),
+        duration: animDuration,
+        delay: animDelay
     })
 
     // Carousel
     tl.add({
-        targets: '.viewer .carousel',
+        targets: viewer.querySelector('.carousel'),
         opacity: [0, 1],
-        translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%']
-    }, 300)
+        translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%'],
+        complete: event => event.animatables[0].target.removeAttribute('style')
+    })
 
     // Carousel: Number
     tl.add({
-        targets: '.viewer .carousel__number_column',
+        targets: viewer.querySelector('.counter'),
         opacity: [0, 1],
-        marginTop: [24, 0],
-        delay: anime.stagger(100)
-    }, 450)
+        translateY: [window.innerWidth >= 768 ? -24 : 24, 0]
+    }, 0)
+
+    // Buttons
+    tl.add({
+        targets: viewer.querySelectorAll('.tip, .viewer__buttons a'),
+        translateY: [-32, 0],
+        opacity: [0, 1],
+        delay: anime.stagger(120),
+    }, 400)
 }