Fix index animations

src/animations/TitleSite.js

@@ -13,7 +13,7 @@ export const animateIn = (scope, init) => {
         translateY: ['100%', 0],
         easing: 'easeOutQuart',
         duration: 1000,
-        delay: anime.stagger(40),
+        delay: anime.stagger(40, { start: init ? 0 : animDelay }),
         autoplay: false
     })
 
@@ -21,12 +21,6 @@ export const animateIn = (scope, init) => {
     const title = ScrollOut({
         once: true,
         targets: scope,
-        onShown: () => {
-            if (init) {
-                letters.restart()
-            } else {
-                setTimeout(() => letters.restart(), animDelay)
-            }
-        }
+        onShown: () => letters.restart()
     })
 }

src/animations/index.js

@@ -67,26 +67,26 @@ export const animateIn = () => {
     // Title: World (reveal on scroll)
     const titleWorld = document.getElementById('title-world')
     const titleWorldTranslate = anime({
-        targets: document.getElementById('title-world'),
+        targets: titleWorld,
         translateX: ['5%', '-3%'],
         easing: 'linear',
         autoplay: false,
         duration: animDuration
     })
-    const titleWorldAnime = parallaxAnime(titleWorld, titleWorldTranslate)
+    const titleWorldAnime = () => parallaxAnime(titleWorld, titleWorldTranslate)
     const titleWorldScroll = ScrollOut({
         once: true,
         targets: titleWorld,
         onShown: () => {
             const titleWorldLetters = anime({
-                targets: el.querySelectorAll('span'),
+                targets: titleWorld.querySelectorAll('span'),
                 translateY: ['100%', 0],
                 easing: 'easeOutQuart',
                 delay: anime.stagger(70),
                 duration: animDuration
             })
-            window.addEventListener('scroll', throttle(() => titleWorldAnime, 10))
-            requestAnimationFrame(() => titleWorldAnime)
+            window.addEventListener('scroll', throttle(titleWorldAnime, 10))
+            requestAnimationFrame(titleWorldAnime)
         },
         onHidden: () => {
             if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)

src/style/organisms/_photos.scss

@@ -53,6 +53,7 @@
     .photo {
         position: relative;
         z-index: 4;
+        overflow: hidden;
 
         // Last photo doesn't need spacing
         &:last-child {