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