diff --git a/src/animations/Carousel.js b/src/animations/Carousel.js index 0073950..698c2a1 100644 --- a/src/animations/Carousel.js +++ b/src/animations/Carousel.js @@ -52,25 +52,25 @@ export const animateIn = scope => { // Reveal on scroll let visible = false - const carouselReveal = ScrollOut({ - once: true, - targets: scope, - onChange: (el, ctx) => { - requestAnimationFrame(() => { + requestAnimationFrame(() => { + const carouselReveal = ScrollOut({ + once: true, + targets: scope, + onChange: (el, ctx) => { if (ctx.visible === 0) { visible = true } - }) - }, - onShown: (el, ctx) => { - // If revealed on scroll, no delay - if (visible) { - tl.restart() + }, + onShown: (el, ctx) => { + // If revealed on scroll, no delay + if (visible) { + requestAnimationFrame(() => tl.restart()) + } + // If revealed on load, add a delay + else { + setTimeout(() => tl.restart(), animDelay * 2) + } } - // If revealed on load, add a delay - else { - setTimeout(() => tl.restart(), animDelay * 2) - } - } + }) }) } \ No newline at end of file diff --git a/src/routes/viewer/[country]/[place]/[photo].svelte b/src/routes/viewer/[country]/[place]/[photo].svelte index f60cf2d..19d421f 100644 --- a/src/routes/viewer/[country]/[place]/[photo].svelte +++ b/src/routes/viewer/[country]/[place]/[photo].svelte @@ -71,11 +71,13 @@ const photoChanged = event => { const currentPhoto = event.detail const windowPathname = window.location.pathname - const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug - // Go to page via a sapper-noscroll link to avoid scroll jump (hacky) - if (gotoLink && newUrl) { - gotoLink.href = newUrl - gotoLink.click() + if (currentPhoto) { + const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug + // Go to page via a sapper-noscroll link to avoid scroll jump (hacky) + if (gotoLink && newUrl) { + gotoLink.href = newUrl + gotoLink.click() + } } } @@ -116,10 +118,12 @@ + {#if $currentLocation} + {/if}