diff --git a/src/routes/comps/Zooter.svelte b/src/routes/comps/Zooter.svelte
index 090787c..a27855c 100644
--- a/src/routes/comps/Zooter.svelte
+++ b/src/routes/comps/Zooter.svelte
@@ -1,23 +1,27 @@
 <script lang="ts">
-    import svelteLogo from "$lib/svelteLogos/svelte-logo.png"
-    import { browser } from '$app/environment';
+    import svelteLogo from "$lib/svelteLogos/svelte-logo.png";
+    import { browser } from "$app/environment";
     import { onDestroy, onMount } from "svelte";
     import { ArrowBigDown } from "lucide-svelte";
+    import { fly } from "svelte/transition";
     const buildTime = __BUILD_TIME__;
-    
+
     let scrollY = 0;
     const unscrollSpeed = 100;
     let unscrollScrollDiv: HTMLDivElement;
     let totalScroll = 0;
-    
-    let unscrollInterval: number |undefined = undefined;
+
+    let unscrollInterval: number | undefined = undefined;
     let lastScrollTime = 0; // Used to have delay before unscrolling
     let isBeingTouched = false; // Phone support
     const unscrollDelay = 100;
 
+    let isLeavingAnimating = false;
+
     // prevent direct scroll
     let notFirstScroll = false;
 
+    let tranisitionOverlay: HTMLElement;
 
     // Function with more scroll control, by chatgpt
     function smoothScrollTo(targetY: number, duration: number = 500): void {
@@ -37,29 +41,63 @@
             const percent = Math.min(time / duration, 1);
 
             // easeInOutQuad easing
-            const ease = percent < 0.5
-            ? 2 * percent * percent
-            : -1 + (4 - 2 * percent) * percent;
+            const ease =
+                percent < 0.5
+                    ? 2 * percent * percent
+                    : -1 + (4 - 2 * percent) * percent;
 
             window.scrollTo(0, startY + diff * ease);
 
             if (time < duration) {
-            requestAnimationFrame(step);
+                requestAnimationFrame(step);
             }
         }
 
         requestAnimationFrame(step);
     }
 
+    // Out animation:
+    function flyInFromTop(
+        node: HTMLElement,
+        {
+            y = -window.innerHeight,
+            duration = 400,
+            opacity = 0,
+        }: { y?: number; duration?: number; opacity?: number } = {},
+    ) {
+        const {
+            delay = 0,
+            duration: d,
+            easing = (t) => t,
+            css,
+        } = fly(node, { y, duration: d, opacity });
 
-    onMount(()=>{
-        totalScroll = document.documentElement.scrollHeight - window.innerHeight
+        let start: number;
+        function step(now: number) {
+            if (!start) start = now;
+            const elapsed = now - start - delay;
+            if (elapsed < 0) return requestAnimationFrame(step);
+            const t = Math.min(elapsed / d, 1);
+            if (css) node.style.cssText = css(easing(t), 1 - easing(t));
+            if (elapsed < d) requestAnimationFrame(step);
+        }
+        requestAnimationFrame(step);
+    }
+
+    onMount(() => {
+        totalScroll =
+            document.documentElement.scrollHeight - window.innerHeight;
 
         unscrollInterval = setInterval(() => {
-
             // Prevents scroll to bottom on first try
-            if (!notFirstScroll && scrollY > totalScroll - unscrollScrollDiv.scrollHeight){
-                smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight*1.1, 0);
+            if (
+                !notFirstScroll &&
+                scrollY > totalScroll - unscrollScrollDiv.scrollHeight
+            ) {
+                smoothScrollTo(
+                    totalScroll - unscrollScrollDiv.scrollHeight * 1.1,
+                    0,
+                );
 
                 // Allow further scroll after delay
                 setTimeout(() => {
@@ -69,49 +107,67 @@
 
             // console.log("Time with delay: " + (Date.now() - -unscrollDelay) + " Other " + lastScrollTime);
             // console.log(isBeingTouched);
-            if (!notFirstScroll || isBeingTouched || Date.now() < lastScrollTime - -unscrollDelay){
+            if (
+                !notFirstScroll ||
+                isBeingTouched ||
+                Date.now() < lastScrollTime - -unscrollDelay
+            ) {
                 // console.log("nah");
-                return
+                return;
             }
 
-            if(totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
-                smoothScrollTo(totalScroll - unscrollScrollDiv.scrollHeight, 200);
+            if (totalScroll - unscrollScrollDiv.scrollHeight < scrollY) {
+                smoothScrollTo(
+                    totalScroll - unscrollScrollDiv.scrollHeight,
+                    200,
+                );
             }
 
-            if (totalScroll <= scrollY){
+            if (totalScroll <= scrollY) {
                 console.log("Hit!");
+                // isLeavingAnimating = true;
+                flyInFromTop(tranisitionOverlay, { duration: 800 });
             }
         }, 10);
     });
 
-    function onScroll(){
+    function onScroll() {
         lastScrollTime = Date.now();
         // console.log("scroll");
     }
 
-    function onResize(){
-        totalScroll = document.documentElement.scrollHeight - window.innerHeight
+    function onResize() {
+        totalScroll =
+            document.documentElement.scrollHeight - window.innerHeight;
     }
 
-    onDestroy(()=>{
+    onDestroy(() => {
         clearInterval(unscrollInterval);
     });
 
     export let hideOnPrint: boolean;
 </script>
 
-<svelte:window bind:scrollY on:scroll={()=>{onScroll();}} 
-    on:touchstart={()=>{isBeingTouched = true}}
-    on:touchend={()=>{isBeingTouched = false}}
+<svelte:window
+    bind:scrollY
+    on:scroll={() => {
+        onScroll();
+    }}
+    on:touchstart={() => {
+        isBeingTouched = true;
+    }}
+    on:touchend={() => {
+        isBeingTouched = false;
+    }}
     on:resize={onResize}
-    />
+/>
 
 <div class="w-full">
     <!-- Keep scrolling thing -->
-    <div bind:this={unscrollScrollDiv} class="h-64 w-full flex flex-col justify-center items-center">
-        <div>
-            Keep scrolling to veiw Zhen's portfolio site!
-        </div>
+    <div
+        class="h-64 w-full flex flex-col justify-center items-center"
+    >
+        <div>Keep scrolling to veiw Zhen's portfolio site!</div>
         <div class="flex justify-center">
             <ArrowBigDown />
             <ArrowBigDown />
@@ -120,50 +176,93 @@
         </div>
     </div>
 
-    <div class="h-64 w-full flex flex-col justify-end items-center">
-       <img src="/images/memes/WhatDaDog.png" class="w-32 h-32 object-contain" alt="da dog"> 
+    <div class="h-64 w-full flex flex-col justify-end items-center"
+        bind:this={unscrollScrollDiv}
+    >
+        <img
+            src="/images/memes/WhatDaDog.png"
+            class="w-32 h-32 object-contain"
+            alt="da dog"
+        />
     </div>
 
     <!-- About footer -->
-    <div class="{hideOnPrint ? 'hide-on-print' : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8">
+    <div
+        class="{hideOnPrint
+            ? 'hide-on-print'
+            : ''} sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
+    >
         <div class="flex justify-center">
             <div class="grid gap-8 sm:grid-cols-3 items-center w-full">
                 <div class="flex flex-col items-center">
                     <span class="font-bold">© 2023-2025</span>
-                    <br>
+                    <br />
                     <span>Benjamin Dreyer</span>
-                    <br>
+                    <br />
                     <span>Oliver Schwenger</span>
-                    <br>
+                    <br />
                     <span>Sylvester Junge</span>
-                    <br>
+                    <br />
                     <span>Snorre Ettrup Altschul</span>
-                    <br>
+                    <br />
                     <span>Zhentao Wei</span>
                 </div>
                 <div class="flex flex-col items-center">
                     <h3><b>About this website</b></h3>
                     <!-- <a href="/" target="_blank">Recursion</a> -->
                     <div class="flex justify-center">
-                        This website was made using <a class="grid place-content-center" target="_blank" href="https://kit.svelte.dev/">
-                        <img class="pl-2" src={svelteLogo} style="height: 1.5rem;" alt="SvelteKit logo"/></a>
+                        This website was made using <a
+                            class="grid place-content-center"
+                            target="_blank"
+                            href="https://kit.svelte.dev/"
+                        >
+                            <img
+                                class="pl-2"
+                                src={svelteLogo}
+                                style="height: 1.5rem;"
+                                alt="SvelteKit logo"
+                            /></a
+                        >
                     </div>
-                    <span>Website <a href="https://git.spoodythe.one/sveske-juice/deprived-main-website" target="_blank">source code</a></span>
-
+                    <span
+                        >Website <a
+                            href="https://git.spoodythe.one/sveske-juice/deprived-main-website"
+                            target="_blank">source code</a
+                        ></span
+                    >
                 </div>
                 <div class="flex flex-col items-center">
                     <h3><b>Contact</b></h3>
                     <a href="mailto:zhen@deprived.dev">zhen@deprived.dev</a>
                     <div class="mt-2"></div>
-                    <a href="https://discord.gg/awatEEqc3M" target="_blank" class="social">
+                    <a
+                        href="https://discord.gg/awatEEqc3M"
+                        target="_blank"
+                        class="social"
+                    >
                         <!-- <span>Discord</span> -->
-                        <img src="/images/icons/discord.svg" class="w-8 h-8 object-contain" alt="Discord"/>
+                        <img
+                            src="/images/icons/discord.svg"
+                            class="w-8 h-8 object-contain"
+                            alt="Discord"
+                        />
                     </a>
                 </div>
             </div>
         </div>
-        <div class="flex w-full justify-center border-t border-base-100 border-dashed">
+        <div
+            class="flex w-full justify-center border-t border-base-100 border-dashed"
+        >
             Last build: {buildTime} (+2 UTC)
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<div
+    bind:this={tranisitionOverlay}
+    class="{isLeavingAnimating
+        ? ''
+        : 'hidden'} fixed top-0 left-0 w-screen h-screen bg-base-200"
+></div>
+<!-- {#if isLeavingAnimating}
+{/if} -->