From 30b2cc3f16336710e1232f22dac2e73ae82204f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 16 Nov 2021 22:35:48 +0100
Subject: [PATCH] Add Homepage entering animations

---
 src/routes/index.svelte        | 41 +++++++++++++++++++++++++++++++++-
 src/style/pages/_homepage.scss |  3 ++-
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 1813a57..b2dde34 100644
--- a/src/routes/index.svelte
+++ b/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 />
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 93aa93d..6c19019 100644
--- a/src/style/pages/_homepage.scss
+++ b/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;