Page and components animations rework WIP

src/animations/index.js

@@ -1,6 +1,6 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
-import { transitionNormal, transitionLong, transitionDelay } from 'utils/store'
+import { animDuration, animDelay } from 'utils/store'
 import { throttle, parallaxAnime } from 'utils/functions'
 
 
@@ -9,16 +9,11 @@ import { throttle, parallaxAnime } from 'utils/functions'
 */
 export const animateIn = () => {
     // Title: Houses
-    // const titleHouses = ScrollOut({
-    //     once: true,
-    //     targets: '#title-houses',
-    //     onShown (el) {
-            // Reveal each letter
-    anime({
+    const titleHouses = anime({
         targets: document.querySelectorAll('#title-houses span'),
         translateY: ['-70%', 0],
-        delay: anime.stagger(80, { start: transitionDelay }),
-        duration: transitionNormal,
+        delay: anime.stagger(80, { start: animDelay }),
+        duration: animDuration,
         easing: 'easeOutQuart'
     })
 
@@ -28,48 +23,39 @@ export const animateIn = () => {
         translateX: ['7%', '-15%'],
         easing: 'linear',
         autoplay: false,
-        duration: transitionNormal
+        duration: animDuration
     })
     window.addEventListener('scroll', throttle(() => parallaxAnime(document.getElementById('title-houses'), translate), 10))
     setTimeout(() => parallaxAnime(document.getElementById('title-houses'), translate), 50)
-    //     },
-    //     onHidden: () => window.removeEventListener('scroll', parallaxAnime)
-    // })
 
     // Intro: Description
-    // const introDescription = ScrollOut({
-    //     once: true,
-    //     targets: '#intro-description',
-    //     onShown (el) {
-    anime({
-        targets: '#intro-description p, #intro-description a',
+    const introDescription = anime({
+        targets: document.getElementById('intro-description').querySelectorAll('p, a'),
         opacity: [0, 1],
         translateY: [8, 0],
         easing: 'easeOutQuart',
-        duration: transitionNormal,
-        delay: anime.stagger(200, { start: transitionDelay + 400 })
+        duration: animDuration,
+        delay: anime.stagger(200, { start: animDelay + 200 })
     })
-    //     }
-    // })
 
-    // Intro: Carousel
-    // const introCarousel = ScrollOut({
-    //     once: true,
-    //     targets: '#intro-carousel',
-    //     onShown (el) {
-    anime({
+    // Intro: Carousel revealing (scroll)
+    const introCarousel = ScrollOut({
+        once: true,
         targets: '#intro-carousel',
-        opacity: [0, 1],
-        translateY: [24, 0],
-        easing: 'easeOutQuart',
-        duration: transitionNormal,
-        delay: transitionDelay + 600,
-        complete: event => event.animatables[0].target.removeAttribute('style')
+        onShown (el) {
+            anime({
+                targets: '#intro-carousel',
+                opacity: [0, 1],
+                translateY: [24, 0],
+                easing: 'easeOutQuart',
+                duration: animDuration,
+                delay: animDelay + 400,
+                complete: event => event.animatables[0].target.removeAttribute('style')
+            })
+        }
     })
-    //     }
-    // })
 
-    // Title: Of
+    // Title: Of (reveal on scroll)
     const titleOf = ScrollOut({
         once: true,
         targets: '#title-of',
@@ -79,51 +65,35 @@ export const animateIn = () => {
                 translateY: ['100%', 0],
                 easing: 'easeOutQuart',
                 delay: anime.stagger(70),
-                duration: transitionNormal
+                duration: animDuration
             })
         }
     })
 
-    // Title: World
+    // 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',
         onShown (el) {
-            anime({
-                targets: el.querySelectorAll('span'),
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                delay: anime.stagger(70),
-                duration: transitionNormal
-            })
-
-            // Parallax on scroll
-            const translate = anime({
-                targets: el,
-                translateX: ['5%', '-3%'],
-                easing: 'linear',
-                autoplay: false,
-                duration: transitionNormal
-            })
-
-            window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
-            setTimeout(() => parallaxAnime(el, translate), 50)
+            window.addEventListener('scroll', throttle(() => parallaxAnime(el, titleWorldTranslate), 10))
+            setTimeout(() => parallaxAnime(el, titleWorldTranslate), 50)
         },
         onHidden: () => window.removeEventListener('scroll', parallaxAnime)
     })
 }
-
-
-
-/*
-** Transition Out
-*/
-export const animateOut = () => {
-    anime({
-        targets: document.querySelector('#title-houses'),
-        translateY: ['-70%', 0],
-        opacity: [1, 0],
-        duration: transitionNormal,
-        easing: 'easeOutQuart'
-    })
-}