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

src/routes/photos.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { browser } from '$app/env'
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
     import { getContext, onMount } from 'svelte'
@@ -7,6 +8,7 @@
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
     import anime from 'animejs'
+    import type { AnimeTimelineInstance } from 'animejs'
     import { map, lerp, throttle } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -239,35 +241,43 @@
     }
 
 
-    onMount(() => {
-        /**
-         * Entering animation
-         */
-        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
+            timeline.add({
+                targets: '.photos__intro .discover',
+                translateY: [16, 0],
+                opacity: [0, 1],
+            }, 900)
+
+            // Filters
+            timeline.add({
+                targets: '.photos__intro .filter',
+                translateY: [16, 0],
+                opacity: [0, 1],
+                complete ({ animatables }) {
+                    const element = animatables[0].target
+                    // Remove style to not interfere with CSS when scrolling back up over photos
+                    element.removeAttribute('style')
+                }
+            }, 1300)
         })
-
-        // Reveal text
-        timeline.add({
-            targets: '.photos__intro .discover',
-            translateY: [16, 0],
-            opacity: [0, 1],
-        }, 900)
-
-        // Filters
-        timeline.add({
-            targets: '.photos__intro .filter',
-            translateY: [16, 0],
-            opacity: [0, 1],
-            complete ({ animatables }) {
-                const element = animatables[0].target
-                // Remove style to not interfere with CSS when scrolling back up over photos
-                element.removeAttribute('style')
-            }
-        }, 1300)
+    }
 
 
+    onMount(() => {
         /**
          * Observers
          */
@@ -280,7 +290,7 @@
                 isIntersecting && observerPhotos.unobserve(target)
             })
         }, {
-            threshold: 0.3,
+            threshold: 0.25,
             rootMargin: '0px 0px 10%'
         })
 
@@ -302,6 +312,11 @@
         const existingPhotos = photosGridEl.querySelectorAll('.photo')
         existingPhotos.forEach(el => observerPhotos.observe(el))
 
+        // Transition in
+        requestAnimationFrame(() => {
+            timeline.play()
+        })
+
 
         // Destroy
         return () => {