Run page animations onMount instead of browser

src/routes/photos.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { browser } from '$app/env'
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
     import { getContext, onMount } from 'svelte'
@@ -245,42 +244,6 @@
     }
 
 
-    /**
-     * 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)
-        })
-    }
-
-
     onMount(() => {
         /**
          * Observers
@@ -316,11 +279,38 @@
         const existingPhotos = photosGridEl.querySelectorAll('.photo')
         existingPhotos.forEach(el => observerPhotos.observe(el))
 
+        /**
+         * Animations
+         */
         // Transition in
-        requestAnimationFrame(() => {
-            timeline.play()
+        const timeline: AnimeTimelineInstance = 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)
+
+        // Play animation
+        requestAnimationFrame(timeline.play)
+
 
         // Destroy
         return () => {