diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte index bdad9b7..c9befdf 100644 --- a/src/routes/[country]/[location]/[photo].svelte +++ b/src/routes/[country]/[location]/[photo].svelte @@ -213,88 +213,79 @@ } - /** - * Transition: Anime timeline - */ - let timeline: AnimeTimelineInstance - - if (browser) { - requestAnimationFrame(() => { - // Setup animations - timeline = anime.timeline({ - duration: 1600, - easing: 'easeOutQuart', - }) - - anime.set('.viewer__picture', { - opacity: 0, - }) - anime.set('.viewer__picture.is-1', { - translateY: 24, - }) - - // Photos - timeline.add({ - targets: '.viewer__picture.is-1', - opacity: 1, - translateY: 0, - duration: 900, - }, 250) - timeline.add({ - targets: '.viewer__picture:not(.is-0):not(.is-1)', - opacity: 1, - translateX (element: HTMLElement, index: number) { - const x = getComputedStyle(element).getPropertyValue('--offset-x').trim() - return [`-${x}`, 0] - }, - delay: anime.stagger(55) - }, 500) - - // Prev/Next buttons - timeline.add({ - targets: '.viewer__controls button', - translateX (item: HTMLElement) { - let direction = item.classList.contains('prev') ? -1 : 1 - return [16 * direction, 0] - }, - opacity: [0, 1], - }, 450) - - - // Infos - timeline.add({ - targets: '.viewer__info > *', - translateY: [24, 0], - opacity: [0, 1], - delay: anime.stagger(200) - }, 400) - - - anime.set('.viewer__index', { - opacity: 0 - }) - // Index - timeline.add({ - targets: '.viewer__index', - opacity: 1, - duration: 900, - }, 600) - // Fly each number - timeline.add({ - targets: '.viewer__index .char', - translateY: ['100%', 0], - delay: anime.stagger(200), - duration: 1000, - }, 700) - }) - } - - onMount(() => { - // Transition in - requestAnimationFrame(() => { - timeline.play() + /** + * Animations + */ + // Setup animations + const timeline: AnimeTimelineInstance = anime.timeline({ + duration: 1600, + easing: 'easeOutQuart', }) + + anime.set('.viewer__picture', { + opacity: 0, + }) + anime.set('.viewer__picture.is-1', { + translateY: 24, + }) + + // Photos + timeline.add({ + targets: '.viewer__picture.is-1', + opacity: 1, + translateY: 0, + duration: 900, + }, 250) + timeline.add({ + targets: '.viewer__picture:not(.is-0):not(.is-1)', + opacity: 1, + translateX (element: HTMLElement, index: number) { + const x = getComputedStyle(element).getPropertyValue('--offset-x').trim() + return [`-${x}`, 0] + }, + delay: anime.stagger(55) + }, 500) + + // Prev/Next buttons + timeline.add({ + targets: '.viewer__controls button', + translateX (item: HTMLElement) { + let direction = item.classList.contains('prev') ? -1 : 1 + return [16 * direction, 0] + }, + opacity: [0, 1], + }, 450) + + + // Infos + timeline.add({ + targets: '.viewer__info > *', + translateY: [24, 0], + opacity: [0, 1], + delay: anime.stagger(200) + }, 400) + + + anime.set('.viewer__index', { + opacity: 0 + }) + // Index + timeline.add({ + targets: '.viewer__index', + opacity: 1, + duration: 900, + }, 600) + // Fly each number + timeline.add({ + targets: '.viewer__index .char', + translateY: ['100%', 0], + delay: anime.stagger(200), + duration: 1000, + }, 700) + + // Transition in + requestAnimationFrame(timeline.play) }) diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte index 8fe28b8..d0f7c34 100644 --- a/src/routes/[country]/[location]/index.svelte +++ b/src/routes/[country]/[location]/index.svelte @@ -1,5 +1,4 @@ diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index 66af083..5c1eadd 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -1,5 +1,4 @@ diff --git a/src/utils/functions/index.ts b/src/utils/functions/index.ts index bd1f1a3..2bedbd7 100644 --- a/src/utils/functions/index.ts +++ b/src/utils/functions/index.ts @@ -113,7 +113,7 @@ export const getRandomElement = (array: any[]): any => { /** * Get a DOM element's position */ -export const getPosition = (node, scope?: HTMLElement) => { +export const getPosition = (node: any, scope?: HTMLElement) => { const root = scope || document let offsetTop = node.offsetTop let offsetLeft = node.offsetLeft