🐛 Setup page transitions

Bugged for some reason, the old page stays before the new page loading at the end

src/routes/index.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
+    import { fade } from 'svelte/transition'
     import { page } from '$app/stores'
-    import { lerp, map } from '$utils/functions'
     import anime from 'animejs'
+    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
@@ -43,9 +44,9 @@
         // Reveal text
         introTimeline.add({
             targets: '.homepage__headline',
-            translateY: [24, 0],
+            translateY: [16, 0],
             opacity: [0, 1],
-        }, 600)
+        }, 900)
 
         // Animate collage photos
         introTimeline.add({
@@ -71,7 +72,10 @@
     image=""
 />
 
-<main class="homepage">
+<main class="homepage"
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
+>
     <section class="homepage__intro">
         <ScrollingTitle tag="h1" class="homepage__title--houses" label="Houses of the World" parallax={introTitleParallax} offsetTop={100}>
             <SplitText text="Houses" mode="chars" />