diff --git a/src/animations/Photo.js b/src/animations/Photo.js index c20e07a..877e725 100644 --- a/src/animations/Photo.js +++ b/src/animations/Photo.js @@ -24,26 +24,33 @@ export const animateIn = scope => { } }) + // Photo (reveal on scroll) - imagesLoaded(scope.querySelector('.photo__image'), instance => { - const image = instance.elements[0] + const photoImage = scope.querySelector('.photo__image') + const photoAnim = anime.timeline({ + easing: 'easeOutQuart', + duration: 2000, + autoplay: false + }) + photoAnim.add({ + targets: scope.querySelector('.photo__picture'), + opacity: [0, 1] + }, 50) + photoAnim.add({ + targets: scope.querySelector('.photo__picture img'), + scale: [1.12, 1] + }, 50) + + // Show photo when image is loaded + imagesLoaded(photoImage, instance => { 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 - }) - } + targets: photoImage, + onShown: el => photoAnim.restart() }) }) + // Number parallax on scroll const nbParallaxMedia = window.matchMedia('(min-width: 768px)') const nbParallax = matchMedia => { diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte index 7cedfe1..33a0ba8 100644 --- a/src/molecules/Photo.svelte +++ b/src/molecules/Photo.svelte @@ -53,7 +53,7 @@ {#if layout === 'list'} - {imgAlt} diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte index 2229099..25a244d 100644 --- a/src/organisms/Carousel.svelte +++ b/src/organisms/Carousel.svelte @@ -148,7 +148,7 @@ on:click={openFullscreen} > - + diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte index dc1c571..ba5b0d8 100644 --- a/src/routes/_layout.svelte +++ b/src/routes/_layout.svelte @@ -1,6 +1,4 @@