Run page animations onMount instead of browser

2022-05-30 21:57:04 +02:00
parent 7a165721d9
commit d3f74be59e
8 changed files with 279 additions and 347 deletions
--- 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)
    })
 </script>