Fix Intro?

src/animations/index.js

@@ -53,7 +53,7 @@ export const animateIn = () => {
     const titleOf = ScrollOut({
         once: true,
         targets: '#title-of',
-        onShown (el) {
+        onShown: el => {
             anime({
                 targets: el.querySelectorAll('span'),
                 translateY: ['100%', 0],
@@ -65,6 +65,7 @@ export const animateIn = () => {
     })
 
     // Title: World (reveal on scroll)
+    const titleWorld = document.getElementById('title-world')
     const titleWorldTranslate = anime({
         targets: document.getElementById('title-world'),
         translateX: ['5%', '-3%'],
@@ -72,10 +73,11 @@ export const animateIn = () => {
         autoplay: false,
         duration: animDuration
     })
-    const titleWorld = ScrollOut({
+    const titleWorldAnime = parallaxAnime(titleWorld, titleWorldTranslate)
+    const titleWorldScroll = ScrollOut({
         once: true,
-        targets: document.getElementById('title-world'),
-        onShown (el) {
+        targets: titleWorld,
+        onShown: () => {
             const titleWorldLetters = anime({
                 targets: el.querySelectorAll('span'),
                 translateY: ['100%', 0],
@@ -83,9 +85,11 @@ export const animateIn = () => {
                 delay: anime.stagger(70),
                 duration: animDuration
             })
-            window.addEventListener('scroll', throttle(() => parallaxAnime(el, titleWorldTranslate), 10))
-            requestAnimationFrame(() => parallaxAnime(el, titleWorldTranslate), 50)
+            window.addEventListener('scroll', throttle(() => titleWorldAnime, 10))
+            requestAnimationFrame(() => titleWorldAnime)
         },
-        onHidden: () => window.removeEventListener('scroll', parallaxAnime)
+        onHidden: () => {
+            if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
+        }
     })
 }