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