Add parallax effects on scroll (titles and photo)

src/animations/Photo.js

@@ -1,7 +1,7 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
 import { animDuration, animDurationLong } from '../utils/store'
-import { debounce } from '../utils/functions'
+import { throttle, parallaxAnime } from '../utils/functions'
 
 
 /*
@@ -12,7 +12,6 @@ export const animateIn = scope => {
     const titleReveal = ScrollOut({
         once: true,
         targets: scope,
-        offset: window.offsetHeight / 3,
         onShown (el) {
             // Title reveal
             anime({
@@ -29,7 +28,6 @@ export const animateIn = scope => {
     const photoReveal = ScrollOut({
         once: true,
         targets: scope.querySelector('picture'),
-        offset: window.offsetHeight / 3,
         onShown (el) {
             // Title reveal
             anime({
@@ -43,6 +41,23 @@ export const animateIn = scope => {
         }
     })
 
-    // Number parallax
+    // Number parallax on scroll
-    //! TODO
+    const numberParallax = ScrollOut({
+        targets: scope.querySelector('.photo__number'),
+        onShown (el) {
+            const translate = anime({
+                targets: el,
+                translateX: ['-50%', '-50%'],
+                translateY: ['-50%', '-20%'],
+                duration: 2000,
+                easing: 'linear',
+                autoplay: false
+            })
+            window.addEventListener('scroll', () => parallaxAnime(el, translate))
+            setTimeout(() => parallaxAnime(el, translate), 50)
+        },
+        onHidden () {
+            window.removeEventListener('scroll', parallaxAnime)
+        }
+    })
 }

src/animations/index.js

@@ -1,7 +1,7 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
 import { animDuration } from '../utils/store'
-import { debounce } from '../utils/functions'
+import { throttle, parallaxAnime } from '../utils/functions'
 
 
 /*
@@ -13,7 +13,7 @@ export const animateIn = () => {
         once: true,
         targets: '#title-houses',
         onShown (el) {
-            // Reveal
+            // Reveal each letter
             anime({
                 targets: el.querySelectorAll('span'),
                 translateY: ['-70%', 0],
@@ -23,19 +23,18 @@ export const animateIn = () => {
             })
 
             // Parallax on scroll
-            const translate = anime.timeline({
+            const translate = anime({
+                targets: el,
+                translateX: ['7%', '-15%'],
+                easing: 'linear',
                 autoplay: false,
                 duration: animDuration
             })
-            translate.add({
+            window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
-                targets: el,
+            setTimeout(() => parallaxAnime(el, translate), 50)
-                translateX: ['-3%', '-17%'],
+        },
-                easing: 'easeOutQuart',
+        onHidden () {
-                duration: animDuration
+            window.removeEventListener('scroll', parallaxAnime)
-            })
-            window.addEventListener('scroll', debounce(event => {
-                translate.seek(translate.duration * (window.scrollY / 1000))
-            }), 50)
         }
     })
 
@@ -100,22 +99,19 @@ export const animateIn = () => {
             })
 
             // Parallax on scroll
-            const translate = anime.timeline({
+            const translate = anime({
+                targets: el,
+                translateX: ['5%', '-3%'],
+                easing: 'linear',
                 autoplay: false,
                 duration: animDuration
             })
-            translate.add({
-                targets: el,
-                translateX: ['4%', '-4%'],
-                easing: 'easeOutQuart',
-                duration: animDuration
-            })
 
-            if (ctx.visible) {
+            window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 10))
-                window.addEventListener('scroll', debounce(event => {
+            setTimeout(() => parallaxAnime(el, translate), 50)
-                    translate.seek(translate.duration * (window.scrollY / 1000))
+        },
-                }), 35)
+        onHidden() {
-            }
+            window.removeEventListener('scroll', parallaxAnime)
         }
     })
 }

src/utils/functions.js

@@ -1,6 +1,16 @@
 import { apiEndpoints } from './store'
 
 
+/*
+** Get thumbnail from API
+*/
+export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
+    const ratio = 1.5
+    height = !height ? Math.round(width / ratio) : height
+    return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}`
+}
+
+
 /*
 ** Debounce function with a delay
 ** (For scrolling or other resource demanding behaviors)
@@ -43,8 +53,26 @@ export const lettersToSpan = string => {
 
 
 /*
-** Format date from an input date
+** Random String Generator
 */
+export const randomString = (length = 6, type = 'A') => {
+    type = type && type.toLowerCase()
+    let str = ''
+    let i = 0
+    const min = type == 'a' ? 10 : 0
+    const max = type == 'n' ? 10 : 62
+    for (; i++ < length;) {
+        let r = Math.random() * (max - min) + min << 0
+        str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48)
+    }
+    return str
+}
+
+
+/*
+** Date related
+*/
+// Format date from an input date
 export const formatDate = (originDate, format) => {
     let output
     const date = new Date(originDate)
@@ -70,10 +98,7 @@ export const formatDate = (originDate, format) => {
     return output
 }
 
-
+// Relative time from an input date
-/*
-** Relative time from an input date
-*/
 export const relativeTime = (originDate, limit = 0) => {
     const date = new Date(originDate)
     const diff = Number(new Date()) - date
@@ -133,29 +158,19 @@ export const relativeTime = (originDate, limit = 0) => {
 }
 
 
-
 /*
-** Random String Generator
+** Controls Anime.js parallax
 */
-export const randomString = (length = 6, type = 'A') => {
+export const parallaxAnime = (element, anime) => {
-    type = type && type.toLowerCase()
+    const bound = element.getBoundingClientRect()
-    let str = ''
+    const windowHeight = window.innerHeight
-    let i = 0
+    if (bound.top < windowHeight && bound.bottom > 0) {
-    const min = type == 'a' ? 10 : 0
+        anime.seek(anime.duration * ((windowHeight - bound.top) / (windowHeight + bound.height)).toFixed(3))
-    const max = type == 'n' ? 10 : 62
+    } else {
-    for (; i++ < length;) {
+        if (bound.top >= windowHeight) {
-        let r = Math.random() * (max - min) + min << 0
+            anime.seek(0)
-        str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48)
+        } else if (bound.bottom <= 0) {
+            anime.seek(anime.duration)
         }
-    return str
     }
-
-
-/*
-** Get thumbnail from API
-*/
-export const getThumbnail = (id, width, height, type = 'crop', quality = 75) => {
-    const ratio = 1.5
-    height = !height ? Math.round(width / ratio) : height
-    return `${apiEndpoints.rest}/assets/${id}?w=${width}&h=${height}&f=${type}&q=${quality}`
 }