Fix index animations

package.json

@@ -37,7 +37,7 @@
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",
-    "autoprefixer": "^9.7.5",
+    "autoprefixer": "^9.7.6",
     "babel-plugin-module-resolver": "^4.0.0",
     "dotenv": "^8.2.0",
     "eslint-config-standard": "^14.1.1",

pnpm-lock.yaml

@@ -19,7 +19,7 @@ devDependencies:
   '@rollup/plugin-commonjs': 11.0.2_rollup@2.3.3
   '@rollup/plugin-node-resolve': 7.1.1_rollup@2.3.3
   '@rollup/plugin-replace': 2.3.1_rollup@2.3.3
-  autoprefixer: 9.7.5
+  autoprefixer: 9.7.6
   babel-plugin-module-resolver: 4.0.0
   dotenv: 8.2.0
   eslint-config-standard: 14.1.1_ba4e39e016526c0b815f06ce4b4a873a
@@ -1167,6 +1167,21 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-URo6Zvt7VYifomeAfJlMFnYDhow1rk2bufwkbamPEAtQFcL11moLk4PnR7n9vlu7M+BkXAZkHFA0mIcY7tjQFg==
+  /autoprefixer/9.7.6:
+    dependencies:
+      browserslist: 4.11.1
+      caniuse-lite: 1.0.30001039
+      chalk: 2.4.2
+      normalize-range: 0.1.2
+      num2fraction: 1.2.2
+      postcss: 7.0.27
+      postcss-value-parser: 4.0.3
+    dev: true
+    engines:
+      node: '>=6.0.0'
+    hasBin: true
+    resolution:
+      integrity: sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==
   /aws-sign2/0.7.0:
     dev: true
     resolution:
@@ -1235,6 +1250,16 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-WqEC7Yr5wUH5sg6ruR++v2SGOQYpyUdYYd4tZoAq1F7y+QXoLoYGXVbxhtaIqWmAJjtNTRjVD3HuJc1OXTel2A==
+  /browserslist/4.11.1:
+    dependencies:
+      caniuse-lite: 1.0.30001039
+      electron-to-chromium: 1.3.390
+      node-releases: 1.1.53
+      pkg-up: 2.0.0
+    dev: true
+    hasBin: true
+    resolution:
+      integrity: sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==
   /buffer-from/1.1.1:
     dev: true
     resolution:
@@ -1311,6 +1336,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ==
+  /caniuse-lite/1.0.30001039:
+    dev: true
+    resolution:
+      integrity: sha512-SezbWCTT34eyFoWHgx8UWso7YtvtM7oosmFoXbCkdC6qJzRfBTeTgE9REtKtiuKXuMwWTZEvdnFNGAyVMorv8Q==
   /caseless/0.12.0:
     dev: true
     resolution:
@@ -3392,6 +3421,14 @@ packages:
       node: '>=4'
     resolution:
       integrity: sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
+  /pkg-up/2.0.0:
+    dependencies:
+      find-up: 2.1.0
+    dev: true
+    engines:
+      node: '>=4'
+    resolution:
+      integrity: sha1-yBmscoBZpGHKscOImivjxJoATX8=
   /pkg-up/3.1.0:
     dependencies:
       find-up: 3.0.0
@@ -4828,7 +4865,7 @@ specifiers:
   '@rollup/plugin-node-resolve': ^7.1.1
   '@rollup/plugin-replace': ^2.3.1
   animejs: ^3.1.0
-  autoprefixer: ^9.7.5
+  autoprefixer: ^9.7.6
   babel-plugin-module-resolver: ^4.0.0
   compression: ^1.7.4
   dotenv: ^8.2.0

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: () => {
+        onShown: () => letters.restart()
-            if (init) {
-                letters.restart()
-            } else {
-                setTimeout(() => letters.restart(), animDelay)
-            }
-        }
     })
 }

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))
+            window.addEventListener('scroll', throttle(titleWorldAnime, 10))
-            requestAnimationFrame(() => titleWorldAnime)
+            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 {