Fix Page transitions by using a hacky FOUC trick

Seems to work though!

src/routes/index.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-    import { browser } from '$app/env'
     import { page } from '$app/stores'
     import { getContext, onMount } from 'svelte'
     import anime from 'animejs'
     import type { AnimeTimelineInstance } from 'animejs'
+    import { DELAY } from '$utils/contants'
+    import { sleep } from '$utils/functions'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -31,49 +32,39 @@
      */
     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)
-        })
+    const transition = async () => {
+        requestAnimationFrame(() => timeline.play())
     }
 
-    onMount(() => {
-        requestAnimationFrame(() => {
-            timeline.play()
+
+    onMount(async () => {
+        timeline = anime.timeline({
+            duration: 1600,
+            easing: 'easeOutQuart',
+            autoplay: false,
         })
+
+        // 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.33%', 0],
+            rotate (item: HTMLElement) {
+                return [-4, getComputedStyle(item).getPropertyValue('--rotation')]
+            },
+            opacity: [0, 1],
+            duration: 1200,
+            delay: anime.stagger(75),
+        }, 0)
+
+        await sleep(DELAY.PAGE_LOADING)
+        await transition()
     })
 </script>
 
@@ -91,7 +82,8 @@
             tag="h1"
             class="homepage__title--houses"
             label="Houses of the World"
-            offsetTop={100}
+            offsetStart={-300}
+            offsetEnd={400}
         >
             <SplitText text="Houses" mode="chars" />
         </ScrollingTitle>
@@ -150,11 +142,7 @@
     <section class="homepage__locations">
         <InteractiveGlobe />
 
-        <ScrollingTitle
-            tag="p"
-            class="homepage__title--world mask"
-            offset={-1 * innerHeight / 2}
-        >
+        <ScrollingTitle tag="p" class="homepage__title--world mask">
             <SplitText text="World" mode="chars" />
         </ScrollingTitle>
 
@@ -205,4 +193,4 @@
             }
         }
     }
-</script>
+</script>