Fix some animations

src/animations/Carousel.js

@@ -10,7 +10,7 @@ export const animateIn = scope => {
     const tl = anime.timeline({
         easing: 'easeOutQuart',
         duration: animDuration,
-        delay: 0
+        autoplay: false
     })
 
     // Photo: Active
@@ -18,6 +18,7 @@ export const animateIn = scope => {
         targets: scope.querySelector('.is-active picture'),
         translateY: [8, 0]
     }, 100)
+
     // Photo: Prev
     tl.add({
         targets: scope.querySelector('.is-prev picture'),
@@ -25,6 +26,7 @@ export const animateIn = scope => {
         translateX: [64, 0],
         rotate: [-2, 0]
     }, 100)
+
     // Photo: Next
     tl.add({
         targets: scope.querySelector('.is-next picture'),

src/animations/Locations.js

@@ -47,6 +47,6 @@ export const animateIn = scope => {
         })
 
         // Increase delay between locations
-        delay += 80
+        delay += 65
     })
 }

src/animations/Photo.js

@@ -28,7 +28,7 @@ export const animateIn = scope => {
     }, 400)
 
     // Reveal on scroll
-    const photoReveal = ScrollOut({
+    const locationScroll = ScrollOut({
         once: true,
         targets: scope,
         onShown: () => tlLocation.restart()
@@ -37,26 +37,26 @@ export const animateIn = scope => {
 
     // Image (reveal on scroll)
     const photoImage = scope.querySelector('.photo__image')
-    const photoAnim = anime.timeline({
+    const photoReveal = anime.timeline({
         easing: 'easeOutQuart',
         duration: 2000,
         autoplay: false
     })
-    photoAnim.add({
+    photoReveal.add({
         targets: scope.querySelector('.photo__picture'),
         opacity: [0, 1]
     }, 50)
-    photoAnim.add({
+    photoReveal.add({
         targets: scope.querySelector('.photo__picture img'),
         scale: [1.12, 1]
     }, 50)
 
     // Show photo when image is loaded
     imagesLoaded(photoImage, instance => {
-        const photoReveal = ScrollOut({
+        const photoScroll = ScrollOut({
             once: true,
             targets: photoImage,
-            onShown: () => photoAnim.restart()
+            onShown: () => photoReveal.restart()
         })
     })
 
@@ -71,13 +71,14 @@ export const animateIn = scope => {
         easing: 'linear',
         autoplay: false
     })
+    const numberPallaxAnime = () => parallaxAnime(number, numberPallax)
     const numberPallaxScroll = matchMedia => {
         if (matchMedia.matches) {
             const scroll = ScrollOut({
                 targets: scope,
-                onShown: (el) => {
+                onShown: () => {
-                    window.addEventListener('scroll', throttle(() => parallaxAnime(el, numberPallax), 50))
+                    window.addEventListener('scroll', throttle(numberPallaxAnime, 50))
-                    requestAnimationFrame(() => parallaxAnime(el, numberPallax))
+                    requestAnimationFrame(numberPallaxAnime)
                 },
                 onHidden: () => {
                     if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime)

src/animations/index.js

@@ -51,7 +51,7 @@ export const animateIn = () => {
 
     // Title: Of (reveal on scroll)
     const titleOf = document.getElementById('title-of')
-    const titleOfAnime = anime({
+    const titleOfReveal = anime({
         targets: titleOf.querySelectorAll('span'),
         translateY: ['100%', 0],
         easing: 'easeOutQuart',
@@ -62,30 +62,32 @@ export const animateIn = () => {
     const titleOfScroll = ScrollOut({
         once: true,
         targets: titleOf,
-        onShown: () => titleOfAnime.restart()
+        onShown: () => titleOfReveal.restart()
     })
 
     // Title: World (reveal on scroll)
     const titleWorld = document.getElementById('title-world')
-    const titleWorldTranslate = anime({
+    const titleWorldReveal = anime({
+        targets: titleWorld.querySelectorAll('span'),
+        translateY: ['100%', 0],
+        easing: 'easeOutQuart',
+        delay: anime.stagger(70),
+        duration: animDuration,
+        autoplay: false
+    })
+    const titleWorldParallax = anime({
         targets: titleWorld,
         translateX: ['5%', '-3%'],
         easing: 'linear',
-        autoplay: false,
+        duration: animDuration,
-        duration: animDuration
+        autoplay: false
     })
-    const titleWorldAnime = () => parallaxAnime(titleWorld, titleWorldTranslate)
+    const titleWorldAnime = () => parallaxAnime(titleWorld, titleWorldParallax)
     const titleWorldScroll = ScrollOut({
         once: true,
         targets: titleWorld,
         onShown: () => {
-            const titleWorldLetters = anime({
+            titleWorldReveal.restart()
-                targets: titleWorld.querySelectorAll('span'),
-                translateY: ['100%', 0],
-                easing: 'easeOutQuart',
-                delay: anime.stagger(70),
-                duration: animDuration
-            })
             window.addEventListener('scroll', throttle(titleWorldAnime, 10))
             requestAnimationFrame(titleWorldAnime)
         },