Use page transition component to avoid repetition on main

src/routes/photos.svelte

@@ -2,13 +2,12 @@
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
     import { getContext, onMount } from 'svelte'
-    import { fade, fly } from 'svelte/transition'
+    import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
     import anime from 'animejs'
     import { map, lerp, throttle } from '$utils/functions'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
@@ -325,10 +324,7 @@
 />
 
 
-<main class="photos"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="photos">
     <section class="photos__intro"
         class:is-passed={scrolledPastIntro}
     >