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

@@ -9,14 +9,15 @@ import { animDuration, animDelay } from 'utils/store'
 export const animateIn = scope => {
     const tl = anime.timeline({
         easing: 'easeOutQuart',
-        duration: animDuration
+        duration: animDuration,
+        delay: 0
     })
 
     // Photo: Active
     tl.add({
         targets: scope.querySelector('.is-active picture'),
-        translateY: [32, 0]
-    })
+        translateY: [8, 0]
+    }, 100)
     // Photo: Prev
     tl.add({
         targets: scope.querySelector('.is-prev picture'),
@@ -30,7 +31,7 @@ export const animateIn = scope => {
         translateY: [8, 0],
         translateX: [-48, 0],
         rotate: [2, 0]
-    }, 150)
+    }, 100)
 
     // Reveal on scroll
     const carouselIn = ScrollOut({

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
+            })
         }
     })
 }

src/animations/Photo.js

@@ -66,7 +66,7 @@ export const animateIn = scope => {
                         autoplay: false
                     })
                     window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 50))
-                    setTimeout(() => parallaxAnime(el, translate), 50)
+                    requestAnimationFrame(() => parallaxAnime(el, translate))
                 },
                 onHidden () {
                     if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)

src/animations/TitleSite.js

@@ -11,7 +11,6 @@ export const animateIn = (scope, init) => {
         easing: 'easeOutQuart',
         duration: 1000
     })
-
     // Stagger each letters and words
     tl.add({
         targets: scope.querySelectorAll('span, em span'),

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)
     })

src/animations/page.js

@@ -10,7 +10,6 @@ export const animateIn = () => {
         easing: 'easeOutQuart',
         duration: animDuration
     })
-
     // Simple slide and fade on each part of the page
     tl.add({
         targets: document.querySelectorAll('.page__part'),

src/animations/place.js

@@ -38,7 +38,7 @@ export const animateIn = () => {
     // Illustration
     tl.add({
         targets: '.place__illustration',
-        scale: [1.075, 1],
+        scale: [1.1, 1],
         opacity: [0, 1]
     }, 0)
 

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)
 }