diff --git a/src/animations/Carousel.js b/src/animations/Carousel.js index d0e7146..1de8ac9 100644 --- a/src/animations/Carousel.js +++ b/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'), diff --git a/src/animations/Locations.js b/src/animations/Locations.js index 5ab0278..633ae31 100644 --- a/src/animations/Locations.js +++ b/src/animations/Locations.js @@ -47,6 +47,6 @@ export const animateIn = scope => { }) // Increase delay between locations - delay += 80 + delay += 65 }) } diff --git a/src/animations/Photo.js b/src/animations/Photo.js index b850902..6fa9893 100644 --- a/src/animations/Photo.js +++ b/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) => { - window.addEventListener('scroll', throttle(() => parallaxAnime(el, numberPallax), 50)) - requestAnimationFrame(() => parallaxAnime(el, numberPallax)) + onShown: () => { + window.addEventListener('scroll', throttle(numberPallaxAnime, 50)) + requestAnimationFrame(numberPallaxAnime) }, onHidden: () => { if (parallaxAnime) window.removeEventListener('scroll', parallaxAnime) diff --git a/src/animations/index.js b/src/animations/index.js index ca9bfed..dff9e26 100644 --- a/src/animations/index.js +++ b/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({ - targets: titleWorld.querySelectorAll('span'), - translateY: ['100%', 0], - easing: 'easeOutQuart', - delay: anime.stagger(70), - duration: animDuration - }) + titleWorldReveal.restart() window.addEventListener('scroll', throttle(titleWorldAnime, 10)) requestAnimationFrame(titleWorldAnime) },