Use page transition component to avoid repetition on main

src/routes/[country]/[location]/index.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { navigating, page } from '$app/stores'
     import { onMount } from 'svelte'
-    import { fade } from 'svelte/transition'
     import anime from 'animejs'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
@@ -192,10 +191,7 @@
 <svelte:window bind:scrollY />
 
 
-<main class="location-page"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="location-page">
     <section class="location-page__intro grid" bind:this={introEl}>
         <h1 class="title" class:is-short={location.name.length <= 4}>
             <span class="housesof mask">

src/routes/__layout.svelte

@@ -8,6 +8,7 @@
     import '$utils/polyfills'
     // Components
     import SVGSprite from '$components/SVGSprite.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
     import Switcher from '$components/molecules/Switcher.svelte'
     import Footer from '$components/organisms/Footer.svelte'
 
@@ -47,7 +48,7 @@
                 if (!$page.query.get('country') && !$page.path.includes('/shop/poster')) {
                     scrollToTop()
                 }
-            }, DURATION.PAGE_OUT * 1.5)
+            }, DURATION.PAGE_OUT + 1)
         }
     })
 
@@ -59,7 +60,9 @@
 
 <Switcher isOver={!!$page.params.location && !!$page.params.photo} />
 
-<slot />
+<PageTransition refresh={$page.path}>
+    <slot />
+</PageTransition>
 
 {#if !$page.params.photo}
     <Footer />

src/routes/credits.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { fade } from 'svelte/transition'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -16,10 +14,7 @@
 />
 
 
-<main class="credits"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="credits">
     <section class="credits__heading">
         <SiteTitle variant="inline" />
         <p class="text-medium">{data.credits.text}</p>

src/routes/index.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
-    import { fade } from 'svelte/transition'
     import { page } from '$app/stores'
     import anime from 'animejs'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
@@ -64,10 +62,7 @@
     image=""
 />
 
-<main class="homepage"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="homepage">
     <section class="homepage__intro">
         <ScrollingTitle
             tag="h1"

src/routes/locations.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
     import { getContext } from 'svelte'
-    import { fade } from 'svelte/transition'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -19,10 +17,7 @@
     image=""
 />
 
-<main class="explore"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="explore">
     <Heading
         text="Explore the globe to discover unique locations across the world"
     />

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}
     >

src/routes/shop/__layout.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { fade } from 'svelte/transition'
     import { shopLocations, cartOpen, cartNotifications } from '$utils/stores/shop'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -59,10 +57,7 @@
     image=""
 />
 
-<main class="shop-page"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="shop-page">
     <Cart />
 
     <section class="shop-page__intro" bind:this={introEl}>

src/routes/subscribe.svelte

@@ -1,7 +1,5 @@
-<script lang="ts">
-    import { fade } from 'svelte/transition'
+<script lang="ts">    import { fade } from 'svelte/transition'
     import dayjs from 'dayjs'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -18,10 +16,7 @@
     image=""
 />
 
-<main class="subscribe"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="subscribe">
     <Heading
         text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
     />