Add transitions to missing pages and attempt to animate it better?

src/routes/index.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-    import { getContext, onMount } from 'svelte'
+    import { browser } from '$app/env'
     import { page } from '$app/stores'
+    import { getContext, onMount } from 'svelte'
     import anime from 'animejs'
+    import type { AnimeTimelineInstance } from 'animejs'
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
@@ -24,33 +26,54 @@
     let scrollY: number, innerHeight: number
 
 
-    onMount(() => {
-        // Setup animations
-        const timeline = anime.timeline({
-            duration: 1600,
-            easing: 'easeOutQuart',
+    /**
+     * Transition: Anime timeline
+     */
+    let timeline: AnimeTimelineInstance
+
+    if (browser) {
+        requestAnimationFrame(() => {
+            // Setup animations
+            timeline = anime.timeline({
+                duration: 1600,
+                easing: 'easeOutQuart',
+                autoplay: false,
+            })
+
+            // Reveal text
+            anime.set('.homepage__headline', {
+                translateY: 16,
+                opacity: 0,
+            })
+            timeline.add({
+                targets: '.homepage__headline',
+                translateY: 0,
+                opacity: 1,
+            }, 900)
+
+            // Animate collage photos
+            anime.set('.homepage__collage .photo-card', {
+                opacity: 0,
+                translateY: '33.33%',
+                rotate: -4,
+            })
+            timeline.add({
+                targets: '.homepage__collage .photo-card',
+                translateY: 0,
+                rotate (item: HTMLElement) {
+                    return getComputedStyle(item).getPropertyValue('--rotation')
+                },
+                opacity: 1,
+                duration: 1200,
+                delay: anime.stagger(75),
+            }, 0)
         })
+    }
 
-        // Reveal text
-        timeline.add({
-            targets: '.homepage__headline',
-            translateY: [16, 0],
-            opacity: [0, 1],
-        }, 900)
-
-        // Animate collage photos
-        timeline.add({
-            targets: '.homepage__collage .photo-card',
-            translateY: ['33.333%', 0],
-            rotate (item: HTMLElement) {
-                // Get target CSS variable for rotation
-                const rotateEnd = getComputedStyle(item).getPropertyValue('--rotation')
-                return [-4, rotateEnd]
-            },
-            opacity: [0, 1],
-            duration: 1200,
-            delay: anime.stagger(75),
-        }, 0)
+    onMount(() => {
+        requestAnimationFrame(() => {
+            timeline.play()
+        })
     })
 </script>