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

@@ -17,16 +17,27 @@ export const animateIn = () => {
         easing: 'easeOutQuart'
     })
 
+    // Carousel
+    const carousel = anime({
+        targets: document.querySelector('.intro .carousel'),
+        translateY: [32, 0],
+        opacity: [0, 1],
+        easing: 'easeOutQuart',
+        duration: animDuration,
+        delay: animDelay,
+        complete: event => event.animatables[0].target.removeAttribute('style')
+    })
+
     // Parallax on scroll
     const translate = anime({
         targets: '#title-houses',
         translateX: ['7%', '-15%'],
         easing: 'linear',
-        autoplay: false,
-        duration: animDuration
+        duration: animDuration,
+        autoplay: false
     })
     window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 10))
-    setTimeout(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
+    requestAnimationFrame(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
 
     // Intro: Description
     const introDescription = anime({
@@ -38,23 +49,6 @@ export const animateIn = () => {
         delay: anime.stagger(200, { start: animDelay + 200 })
     })
 
-    // Intro: Carousel revealing (scroll)
-    const introCarousel = ScrollOut({
-        once: true,
-        targets: '#intro-carousel',
-        onShown (el) {
-            anime({
-                targets: el,
-                opacity: [0, 1],
-                translateY: [24, 0],
-                easing: 'easeOutQuart',
-                duration: animDuration,
-                delay: animDelay + 400,
-                complete: event => event.animatables[0].target.removeAttribute('style')
-            })
-        }
-    })
-
     // Title: Of (reveal on scroll)
     const titleOf = ScrollOut({
         once: true,
@@ -71,6 +65,13 @@ export const animateIn = () => {
     })
 
     // Title: World (reveal on scroll)
+    const titleWorldTranslate = anime({
+        targets: document.getElementById('title-world'),
+        translateX: ['5%', '-3%'],
+        easing: 'linear',
+        autoplay: false,
+        duration: animDuration
+    })
     const titleWorld = ScrollOut({
         once: true,
         targets: document.getElementById('title-world'),
@@ -82,15 +83,8 @@ export const animateIn = () => {
                 delay: anime.stagger(70),
                 duration: animDuration
             })
-            const titleWorldTranslate = anime({
-                targets: el,
-                translateX: ['5%', '-3%'],
-                easing: 'linear',
-                autoplay: false,
-                duration: animDuration
-            })
             window.addEventListener('scroll', throttle(() => parallaxAnime(el, titleWorldTranslate), 10))
-            setTimeout(() => parallaxAnime(el, titleWorldTranslate), 50)
+            requestAnimationFrame(() => parallaxAnime(el, titleWorldTranslate), 50)
         },
         onHidden: () => window.removeEventListener('scroll', parallaxAnime)
     })