Add Location page entering animation

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

@@ -1,10 +1,12 @@
 <script lang="ts">
-    import { page } from '$app/stores'
+    import { navigating, page } from '$app/stores'
-    import { getAssetUrlKey } from '$utils/helpers'
+    import { onMount } from 'svelte'
     import { fade } from 'svelte/transition'
+    import anime from 'animejs'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
+    import { getAssetUrlKey } from '$utils/helpers'
     import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
@@ -22,10 +24,14 @@
     dayjs.extend(relativeTime)
 
     const { params } = $page
-    let currentPage: number = 1
+    const hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
+
+    let introEl: HTMLElement
+    let scrollY: number
+    let currentPage = 1
     let ended: boolean
     let currentPhotosAmount: number
-    const hasIllustration = location.illustration_desktop && location.illustration_desktop_2x && location.illustration_mobile
+    let illustrationOffsetY = 0
 
     $: latestPhoto = photos[0]
     $: currentPhotosAmount = photos.length
@@ -88,6 +94,51 @@
             throw new Error('Error while loading new photos')
         }
     }
+
+
+    /**
+     * Add parallax on illustration when scrolling
+     */
+    $: if (scrollY && scrollY < introEl.offsetHeight) {
+        illustrationOffsetY = scrollY * 0.1
+    }
+
+
+    onMount(() => {
+        const timeline = anime.timeline({
+            duration: 1600,
+            easing: 'easeOutQuart'
+        })
+
+        // Title word
+        timeline.add({
+            targets: '.location-page__intro .word',
+            translateY: ['110%', 0],
+            delay: anime.stagger(200)
+        }, 200 + ($navigating ? DURATION.PAGE_IN : 0))
+
+        // Illustration
+        timeline.add({
+            targets: '.location-page__illustration',
+            scale: [1.06, 1],
+            opacity: [0, 1],
+            duration: 2400,
+        }, 400 + ($navigating ? DURATION.PAGE_IN : 0))
+
+        // Title of
+        timeline.add({
+            targets: '.location-page__intro .of',
+            opacity: [0, 1],
+            duration: 1200,
+        }, 1050 + ($navigating ? DURATION.PAGE_IN : 0))
+
+        // Description
+        timeline.add({
+            targets: '.location-page__description',
+            translateY: ['10%', 0],
+            opacity: [0, 1],
+        }, 900 + ($navigating ? DURATION.PAGE_IN : 0))
+    })
 </script>
 
 <Metas
@@ -96,19 +147,21 @@
     image={getAssetUrlKey(latestPhoto.image.id, 'share-image')}
 />
 
+<svelte:window bind:scrollY />
 
 
 <main class="location-page"
     in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
     out:fade={{ duration: DURATION.PAGE_OUT }}
 >
+    <section class="location-page__intro grid" bind:this={introEl}>
         <h1 class="title">
-            <span class="housesof">
+            <span class="housesof mask">
-                <strong>Houses</strong>
+                <strong class="word">Houses</strong>
-                <span>of</span>
+                <span class="of">of</span>
             </span>
-            <strong class="city">
+            <strong class="city mask">
-                {location.name}
+                <span class="word">{location.name}</span>
             </strong>
         </h1>