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
-    //! TODO
+    // Number parallax on scroll
+    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)
+        }
+    })
 }