From 945b162318ef44eac07a01180875266881439cef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sat, 4 Apr 2020 13:02:51 +0200
Subject: [PATCH] Photo: Fix scroll and reveal

---
 src/animations/Photo.js | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/animations/Photo.js b/src/animations/Photo.js
index a92d33f..0fa9fb8 100644
--- a/src/animations/Photo.js
+++ b/src/animations/Photo.js
@@ -1,8 +1,7 @@
 import anime from 'animejs'
 import ScrollOut from 'scroll-out'
 import imagesLoaded from 'imagesloaded'
-import { parallaxAnime } from 'utils/functions'
-// import { animDuration, animDurationLong } from 'utils/store'
+import { throttle, parallaxAnime } from 'utils/functions'
 
 
 /*
@@ -12,36 +11,37 @@ export const animateIn = scope => {
     // Title (reveal on scroll)
     const titleReveal = ScrollOut({
         once: true,
-        targets: scope,
+        targets: scope.querySelector('h2'),
         onShown (el) {
             // Title reveal
             anime({
-                targets: el.querySelectorAll('h2 span'),
+                targets: el.querySelectorAll('span'),
                 translateY: ['100%', 0],
+                easing: 'easeOutQuart',
                 duration: 1000,
-                delay: anime.stagger(120),
-                easing: 'easeOutQuart'
+                delay: anime.stagger(120)
             })
         }
     })
 
     // Photo (reveal on scroll)
-    const photoReveal = ScrollOut({
-        once: true,
-        targets: scope.querySelector('.photo__image'),
-        onShown (el) {
-            // Load the photo then reveal it
-            imagesLoaded(el, instance => {
+    imagesLoaded(scope.querySelector('.photo__image'), instance => {
+        const image = instance.elements[0]
+        const photoReveal = ScrollOut({
+            once: true,
+            targets: image,
+            onShown (el) {
+                // Load the photo then reveal it
                 anime({
                     targets: el.querySelector('img'),
                     scale: [1.12, 1],
                     opacity: [0, 1],
+                    easing: 'easeOutQuart',
                     duration: 2000,
-                    delay: 50,
-                    easing: 'easeOutQuart'
+                    delay: 50
                 })
-            })
-        }
+            }
+        })
     })
 
     // Number parallax on scroll
@@ -58,11 +58,12 @@ export const animateIn = scope => {
                         easing: 'linear',
                         autoplay: false
                     })
-                    window.addEventListener('scroll', () => parallaxAnime(el, translate))
+                    window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 50))
                     setTimeout(() => parallaxAnime(el, translate), 50)
+                    console.log('show')
                 },
                 onHidden () {
-                    window.removeEventListener('scroll', parallaxAnime)
+                    if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
                 }
             })
         }