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

src/routes/[country]/[location]/index.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+    import { browser } from '$app/env'
     import { navigating, page } from '$app/stores'
     import { onMount } from 'svelte'
     import anime from 'animejs'
+    import type { AnimeTimelineInstance } from 'animejs'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
@@ -106,42 +108,53 @@
     }
 
 
-    onMount(() => {
-        const timeline = anime.timeline({
-            duration: 1600,
-            easing: 'easeOutQuart'
+    /**
+     * Transition: Anime timeline
+     */
+    let timeline: AnimeTimelineInstance
+
+    if (browser) {
+        requestAnimationFrame(() => {
+            timeline = anime.timeline({
+                duration: 1600,
+                easing: 'easeOutQuart',
+                autoplay: false,
+            })
+
+            // Title word
+            timeline.add({
+                targets: '.location-page__intro .word',
+                translateY: ['110%', 0],
+                delay: anime.stagger(200)
+            }, 200 + ($navigating ? DURATION.PAGE_IN : 0))
+
+            // Illustration
+            timeline.add({
+                targets: '.location-page__illustration',
+                scale: [1.06, 1],
+                opacity: [0, 1],
+                duration: 2400,
+            }, 400 + ($navigating ? DURATION.PAGE_IN : 0))
+
+            // Title of
+            timeline.add({
+                targets: '.location-page__intro .of',
+                opacity: [0, 1],
+                duration: 1200,
+            }, 1050 + ($navigating ? DURATION.PAGE_IN : 0))
+
+            // Description
+            timeline.add({
+                targets: '.location-page__description',
+                translateY: ['10%', 0],
+                opacity: [0, 1],
+            }, 900 + ($navigating ? DURATION.PAGE_IN : 0))
         })
-
-        // Title word
-        timeline.add({
-            targets: '.location-page__intro .word',
-            translateY: ['110%', 0],
-            delay: anime.stagger(200)
-        }, 200 + ($navigating ? DURATION.PAGE_IN : 0))
-
-        // Illustration
-        timeline.add({
-            targets: '.location-page__illustration',
-            scale: [1.06, 1],
-            opacity: [0, 1],
-            duration: 2400,
-        }, 400 + ($navigating ? DURATION.PAGE_IN : 0))
-
-        // Title of
-        timeline.add({
-            targets: '.location-page__intro .of',
-            opacity: [0, 1],
-            duration: 1200,
-        }, 1050 + ($navigating ? DURATION.PAGE_IN : 0))
-
-        // Description
-        timeline.add({
-            targets: '.location-page__description',
-            translateY: ['10%', 0],
-            opacity: [0, 1],
-        }, 900 + ($navigating ? DURATION.PAGE_IN : 0))
+    }
 
 
+
+    onMount(() => {
         // Photos IntersectionObserver
         observerPhotos = new IntersectionObserver(entries => {
             entries.forEach(({ isIntersecting, target }: IntersectionObserverEntry) => {
@@ -173,6 +186,11 @@
         const existingPhotos = photosListEl.querySelectorAll('.house')
         existingPhotos.forEach(el => observerPhotos.observe(el))
 
+        // Transition in
+        requestAnimationFrame(() => {
+            timeline.play()
+        })
+
 
         // Destroy
         return () => {