Use reveal function to animate in ScrollingTitle

src/routes/index.svelte

@@ -24,7 +24,6 @@
     const { path } = $page
 
     let scrollY: number, innerHeight: number
-    let introTitleParallax = 0
 
 
     onMount(() => {
@@ -34,13 +33,6 @@
             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',
@@ -77,7 +69,12 @@
     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}>
+        <ScrollingTitle
+            tag="h1"
+            class="homepage__title--houses"
+            label="Houses of the World"
+            offsetTop={100}
+        >
             <SplitText text="Houses" mode="chars" />
         </ScrollingTitle>
 
@@ -135,7 +132,11 @@
     <section class="homepage__locations" id="locations">
         <InteractiveGlobe />
 
-        <ScrollingTitle tag="p" class="homepage__title--world" parallax={introTitleParallax} offset={-1 * innerHeight / 2}>
+        <ScrollingTitle
+            tag="p"
+            class="homepage__title--world"
+            offset={-1 * innerHeight / 2}
+        >
             <SplitText text="World" mode="chars" />
         </ScrollingTitle>