Add Homepage entering animations

src/routes/index.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-    import { getContext } from 'svelte'
+    import { getContext, onMount } from 'svelte'
     import { page } from '$app/stores'
+    import { lerp, map } from '$utils/functions'
+    import anime from 'animejs'
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
@@ -22,6 +24,43 @@
 
     let scrollY: number, innerHeight: number
     let introTitleParallax = 0
+
+
+    onMount(() => {
+        // Setup animations
+        const introTimeline = anime.timeline({
+            duration: 1600,
+            easing: 'easeOutQuart',
+        })
+
+        // Animate h1 title
+        introTimeline.add({
+            targets: '.homepage__title--houses .char',
+            translateY: ['-100%', 0],
+            delay: anime.stagger(60),
+        }, 200)
+
+        // Reveal text
+        introTimeline.add({
+            targets: '.homepage__headline',
+            translateY: [24, 0],
+            opacity: [0, 1],
+        }, 600)
+
+        // Animate collage photos
+        introTimeline.add({
+            targets: '.homepage__collage .photo-card',
+            translateY: ['33.333%', 0],
+            rotate (item: HTMLElement) {
+                // Get target CSS variable for rotation
+                const rotateEnd = getComputedStyle(item).getPropertyValue('--rotation')
+                return [-4, rotateEnd]
+            },
+            opacity: [0, 1],
+            duration: 1200,
+            delay: anime.stagger(75),
+        }, 0)
+    })
 </script>
 
 <svelte:window bind:scrollY bind:innerHeight />

src/style/pages/_homepage.scss

@@ -31,7 +31,7 @@
 
     // Intro Section
     &__intro {
-        background-color: $color-tertiary;
+        background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary;
         color: $color-text;
         text-align: center;
         overflow: hidden;
@@ -114,6 +114,7 @@
         }
 
         .photo-card {
+            --rotation: 0deg;
             position: relative;
             display: block;
             grid-column-end: span 8;