Use reveal function to animate in ScrollingTitle

src/components/atoms/ScrollingTitle.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
     import { map } from '$utils/functions'
+    import { reveal, fly } from '$animations/index'
 
     export let tag: string
     export let label: string = undefined
     export let parallax: number = undefined
     export let offset: number = 0
+    export let animate: boolean = true
 
     let scrollY: number
     let titleEl: HTMLElement
@@ -20,21 +22,37 @@
         'title-huge',
         $$props.class
     ].join(' ').trim()
+
+
+    const revealOptions = animate ? {
+        animation: fly,
+        options: {
+            children: '.char',
+            stagger: 60,
+            duration: 1600,
+            from: '-100%',
+            opacity: false,
+            delay: 200,
+        },
+        threshold: 0.2,
+    } : {}
 </script>
 
 <svelte:window bind:scrollY />
 
 {#if tag === 'h1'}
-    <h1 class={classes} aria-label={label}
-        bind:this={titleEl}
+    <h1 bind:this={titleEl}
+        class={classes} aria-label={label}
         style="--parallax-x: {parallax};"
+        use:reveal={revealOptions}
     >
         <slot />
     </h1>
 {:else if tag === 'p'}
-    <p class={classes} aria-label={label}
-        bind:this={titleEl}
+    <p bind:this={titleEl}
+        class={classes} aria-label={label}
         style="--parallax-x: {parallax};"
+        use:reveal={revealOptions}
     >
         <slot />
     </p>