Fix pages and components animations

- Fix delays
- Add the init back for TitleSite as it needs a delay for the page instance vs. loader

src/animations/Locations.js

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

src/animations/TitleSite.js

@@ -1,5 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
+import { animDelay } from 'utils/store'
 
 
 /*
@@ -15,7 +16,7 @@ export const animateIn = (scope, init) => {
     tl.add({
         targets: scope.querySelectorAll('span, em span'),
         translateY: ['100%', 0],
-        delay: anime.stagger(40),
+        delay: anime.stagger(40, { start: init ? 0 : animDelay }),
     })
 
     // On scroll animation

src/animations/index.js

@@ -44,7 +44,7 @@ export const animateIn = () => {
         targets: '#intro-carousel',
         onShown (el) {
             anime({
-                targets: '#intro-carousel',
+                targets: el,
                 opacity: [0, 1],
                 translateY: [24, 0],
                 easing: 'easeOutQuart',
@@ -71,26 +71,24 @@ export const animateIn = () => {
     })
 
     // Title: World (reveal on scroll)
-    const titleWorldLetters = anime({
-        targets: scope.querySelectorAll('span'),
-        translateY: ['100%', 0],
-        easing: 'easeOutQuart',
-        delay: anime.stagger(70),
-        duration: animDuration,
-        autoplay: false
-    })
-    const titleWorldTranslate = anime({
-        targets: scope,
-        translateX: ['5%', '-3%'],
-        easing: 'linear',
-        autoplay: false,
-        duration: animDuration
-    })
-    // Reveal on scroll
     const titleWorld = ScrollOut({
         once: true,
-        targets: '#title-world',
+        targets: document.getElementById('title-world'),
         onShown (el) {
+            const titleWorldLetters = anime({
+                targets: el.querySelectorAll('span'),
+                translateY: ['100%', 0],
+                easing: 'easeOutQuart',
+                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)
         },

src/animations/page.js

@@ -6,13 +6,16 @@ import { animDuration, animDelay } from 'utils/store'
 ** Transition In
 */
 export const animateIn = () => {
+    const tl = anime.timeline({
+        easing: 'easeOutQuart',
+        duration: animDuration
+    })
+
     // Simple slide and fade on each part of the page
-    anime({
+    tl.add({
         targets: document.querySelectorAll('.page__part'),
         opacity: [0, 1],
         translateY: [8, 0],
-        easing: 'easeOutQuart',
-        duration: animDuration,
-        delay: anime.stagger(220, { start: animDelay }),
+        delay: anime.stagger(160, { start: animDelay })
     })
 }