From 10a28c9df0676cf9880636e290fec25e406c39dd Mon Sep 17 00:00:00 2001
From: BackwardsUser <alexander@backwards.dev>
Date: Sat, 11 Jan 2025 08:48:42 -0500
Subject: [PATCH] Updated slide animation

---
 src/lib/components/Header.svelte | 52 +++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 2291272..5ad3cce 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,32 +1,50 @@
 <script>
-	import Hero from '$lib/components/Hero.svelte';
-	import { LightSwitch } from '@skeletonlabs/skeleton';
-	import ArrowDown from '~icons/material-symbols/keyboard-double-arrow-down-rounded';
-	import { crossfade, fade, fly } from 'svelte/transition';
-	import { onMount } from 'svelte';
-
-	let isAtTop = true;
-
+  import Hero from "$lib/components/Hero.svelte";
+  import { LightSwitch } from "@skeletonlabs/skeleton";
+  import ArrowDown from "~icons/material-symbols/keyboard-double-arrow-down-rounded";
+  import { crossfade, fade, fly } from "svelte/transition";
+  import { onMount } from "svelte";
+  
+  let isAtTop = true;
+  
   onMount(() => {
     const handleScroll = () => {
       isAtTop = window.scrollY === 0;
     };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
   });
 </script>
 
-<header class="align-center flex h-screen flex-col justify-between p-4 hero">
+<!-- Add these classes to your root container (likely in app.html or layout.svelte) -->
+<style>
+  :global(html) {
+    scroll-snap-type: y mandatory;
+    scroll-behavior: smooth;
+  }
+</style>
+
+<!-- Add scroll-snap-align to your sections -->
+<header class="align-center flex h-screen flex-col justify-between p-4 hero scroll-snap-start">
   <div class=""></div>
   <Hero></Hero>
   <div 
-    class="transition-all duration-300 text-xl self-center ease-in-out relative"
-    style="transform: translateX({isAtTop ? '0px' : '-200px'})"
+    class="transition-all duration-300 text-xl self-center ease-in-out relative slide h-6"
     class:opacity-0={!isAtTop}
   >
-    <div class="animate-bounce">
-      <ArrowDown></ArrowDown>
-    </div>
+    {#if isAtTop}
+      <div
+        class="animate-bounce"
+        in:fly={{ x: 200, duration: 300 }}
+        out:fly={{ x: -200, duration: 300 }}
+      >
+        <ArrowDown></ArrowDown>
+      </div>
+    {/if}
   </div>
 </header>
+
+<!-- Your next section -->
+<section class="h-screen scroll-snap-start">
+  <!-- Content -->
+</section>
\ No newline at end of file