From 8759477b792cdbd703fd6327063474b717eb1434 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 21 Nov 2021 14:40:02 +0100
Subject: [PATCH] Use reveal function to animate in ScrollingTitle

---
 src/components/atoms/ScrollingTitle.svelte | 26 ++++++++++++++++++----
 src/routes/index.svelte                    | 21 ++++++++---------
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/atoms/ScrollingTitle.svelte b/src/components/atoms/ScrollingTitle.svelte
index 49f0d59..6fc3c81 100644
--- a/src/components/atoms/ScrollingTitle.svelte
+++ b/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>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index b055c5d..0365a43 100644
--- a/src/routes/index.svelte
+++ b/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>