Photo: Tweak reveal animations and fix horizontal scroll

- Photo number doesn't jumps anymore (now reveals based on photo not the number)
- Properly reveal title locations lines
- Optimize code

src/animations/Photo.js

@@ -2,30 +2,40 @@ import anime from 'animejs'
 import ScrollOut from 'scroll-out'
 import imagesLoaded from 'imagesloaded'
 import { throttle, parallaxAnime } from 'utils/functions'
+import { animDuration } from 'utils/store'
 
 
 /*
 ** Transition In
 */
 export const animateIn = scope => {
-    // Title (reveal on scroll)
-    const titleReveal = ScrollOut({
+    const tlLocation = anime.timeline({
+        easing: 'easeOutQuart',
+        duration: 1000,
+        autoplay: false
+    })
+    // Title
+    tlLocation.add({
+        targets: scope.querySelectorAll('.photo__location .line span'),
+        translateY: ['100%', 0],
+        delay: anime.stagger(120)
+    }, 200)
+    // Description
+    tlLocation.add({
+        targets: scope.querySelectorAll('.photo__location p'),
+        opacity: [0, 1],
+        duration: animDuration
+    }, 400)
+
+    // Reveal on scroll
+    const photoReveal = ScrollOut({
         once: true,
-        targets: scope.querySelector('h2'),
-        onShown (el) {
-            // Title reveal
-            anime({
-                targets: el.querySelectorAll('span'),
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                duration: 1000,
-                delay: anime.stagger(120)
-            })
-        }
+        targets: scope,
+        onShown: () => tlLocation.restart()
     })
 
 
-    // Photo (reveal on scroll)
+    // Image (reveal on scroll)
     const photoImage = scope.querySelector('.photo__image')
     const photoAnim = anime.timeline({
         easing: 'easeOutQuart',
@@ -46,29 +56,30 @@ export const animateIn = scope => {
         const photoReveal = ScrollOut({
             once: true,
             targets: photoImage,
-            onShown: el => photoAnim.restart()
+            onShown: () => photoAnim.restart()
         })
     })
 
 
     // Number parallax on scroll
-    const nbParallaxMedia = window.matchMedia('(min-width: 768px)')
-    const nbParallax = matchMedia => {
+    const media768 = window.matchMedia('(min-width: 768px)')
+    const number = scope.querySelector('.photo__number')
+    const numberPallax = anime({
+        targets: number.querySelector('span'),
+        translateY: (window.innerWidth <= 768) ? ['0%', '20%'] : ['-20%', '20%'],
+        duration: 2000,
+        easing: 'linear',
+        autoplay: false
+    })
+    const numberPallaxScroll = matchMedia => {
         if (matchMedia.matches) {
             const scroll = ScrollOut({
-                targets: scope.querySelector('.photo__number span'),
-                onShown (el) {
-                    const translate = anime({
-                        targets: el,
-                        translateY: (window.innerWidth <= 768) ? ['0%', '20%'] : ['-15%', '15%'],
-                        duration: 2000,
-                        easing: 'linear',
-                        autoplay: false
-                    })
-                    window.addEventListener('scroll', throttle(() => parallaxAnime(el, translate), 50))
-                    requestAnimationFrame(() => parallaxAnime(el, translate))
+                targets: scope,
+                onShown: (el) => {
+                    window.addEventListener('scroll', throttle(() => parallaxAnime(el, numberPallax), 50))
+                    requestAnimationFrame(() => parallaxAnime(el, numberPallax))
                 },
-                onHidden () {
+                onHidden: () => {
                     if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)
                 }
             })
@@ -76,6 +87,6 @@ export const animateIn = scope => {
     }
 
     // Listen on screen size to run the function
-    nbParallaxMedia.addListener(nbParallax)
-    nbParallax(nbParallaxMedia)
+    media768.addListener(numberPallax)
+    numberPallaxScroll(media768)
 }