Fix Homepage transition

src/routes/index.svelte

@@ -5,6 +5,7 @@
     import type { AnimeTimelineInstance } from 'animejs'
     import { DELAY } from '$utils/contants'
     import { sleep } from '$utils/functions'
+    import { reveal, fade as animeFade } from '$animations/index'
     // Components
     import Metas from '$components/Metas.svelte'
     import PageTransition from '$components/PageTransition.svelte'
@@ -25,19 +26,10 @@
     const { settings, locations }: any = getContext('global')
 
     let scrollY: number, innerHeight: number
-
-
-    /**
-     * Transition: Anime timeline
-     */
     let timeline: AnimeTimelineInstance
 
-    const transition = async () => {
-        requestAnimationFrame(() => timeline.play())
-    }
 
-
-    onMount(async () => {
+    onMount(() => {
         timeline = anime.timeline({
             duration: 1600,
             easing: 'easeOutQuart',
@@ -49,7 +41,7 @@
             targets: '.homepage__headline',
             translateY: [16, 0],
             opacity: [0, 1],
-        }, 900)
+        }, 750)
 
         // Animate collage photos
         timeline.add({
@@ -63,8 +55,7 @@
             delay: anime.stagger(75),
         }, 0)
 
-        await sleep(DELAY.PAGE_LOADING)
-        await transition()
+        sleep(DELAY.PAGE_LOADING).then(timeline.play)
     })
 </script>
 
@@ -77,7 +68,14 @@
 />
 
 <PageTransition name="homepage">
-    <section class="homepage__intro">
+    <section class="homepage__intro"
+        use:reveal={{
+            animation: animeFade,
+            options: {
+                duration: 1000,
+            },
+        }}
+    >
         <ScrollingTitle
             tag="h1"
             class="homepage__title--houses"