Better Zhen animation

src/routes/zhen/+page.svelte

@@ -1,75 +1,101 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { onMount } from "svelte";
+    import { Vector2 } from "./Utils/Vector2";
 
     // Params
-    let mouseMoveDevider = 1.5;
+    let mouseMoveScale: number = 0.5;
 
     // Site variables
-    let mouseX = 0;
+    let mousePos: Vector2;
-    let mouseY = 0;
 
     // Element binded variables
-    let animatedTopBackgroundX = 0;
+    let mouseRelativeScaled: Vector2 = new Vector2(0, 0);
-    let animatedTopBackgroundY = 0;
+
+    let windowWidth = 0;
+    let windowHeight = 0;
+
+    let screenCenter: Vector2;
 
     let StartPageAnimated: Element;
+    let windowRef: Window;
 
-    function handleMouseMove(event: MouseEvent) {
+    function onMouseMoved(event: MouseEvent) {
-        // Calculate the mouse position relative to the center of the div
+        mousePos = new Vector2(event.clientX, event.clientY);
-        const centerX = StartPageAnimated.clientWidth / 2;
-        const centerY = StartPageAnimated.clientHeight / 2;
 
-        mouseX = event.clientX;
+        updateAnimation(mousePos);
-        mouseY = event.clientY;
-        
-        animatedTopBackgroundX = mouseX - StartPageAnimated.clientLeft - centerX;
-        animatedTopBackgroundY = mouseY - StartPageAnimated.clientTop - centerY;
-
-        //console.log(mouseX+"\n"+mouseY);
     }
 
-    // let windowWidth = window.innerWidth;
+    function updateAnimation(mousePos: Vector2) {
-    // let windowHeight = window.innerHeight;
+        let mouseRelativePos = mousePos.Sub(screenCenter);
+        mouseRelativeScaled = mouseRelativePos.Scale(mouseMoveScale);
 
-    // // Update window dimensions on mount
+        //console.log(mouseRelativePos.x+"\n"+mouseRelativePos.y);
-    // onMount(() => {
+    }
-    //     const updateDimensions = () => {
-    //     windowWidth = window.innerWidth;
-    //     windowHeight = window.innerHeight;
-    //     };
 
-    //     window.addEventListener('resize', updateDimensions);
+    onMount(() => {
+        windowRef = window;
 
-    //     return () => {
+        const updateDimensions = () => {
-    //     window.removeEventListener('resize', updateDimensions);
+            windowWidth = windowRef.innerWidth;
-    //     };
+            windowHeight = windowRef.innerHeight;
-    // });
+
+            screenCenter = new Vector2(windowWidth / 2, windowHeight / 2);
+
+            //console.log("Window size changed: (" + windowWidth + ", " + windowHeight + ")");
+        };
+
+        updateDimensions(); // On first pass
+
+        windowRef.addEventListener("resize", updateDimensions);
+
+        return () => {
+            windowRef.removeEventListener("resize", updateDimensions);
+        };
+    });
 </script>
 
-<svelte:body on:mousemove={handleMouseMove}/>
+<svelte:window on:mousemove={onMouseMoved} />
 
 <div class="StartPageContainer">
+    <div
+        class="StartPageAnimated"
+        bind:this={StartPageAnimated}
+        style="transform: translate(calc({mouseRelativeScaled.x}px), {mouseRelativeScaled.y}px);"
+    >
 
-    <div class="StartPageAnimated" bind:this={StartPageAnimated} style="transform: translate({animatedTopBackgroundX}px, {animatedTopBackgroundY}px);">
+        <span
-        <span class="rotate45" style="display: flex; justify-content: center; align-items: center;">TEXT!!!</span>
+            class="rotate45"
+            style="display: flex; justify-content: center; align-items: center;"
+            >TEXT!!!</span
+        >
     </div>
 </div>
 
 <style>
-    .StartPageContainer{
+    .StartPageContainer {
         height: 40vh;
 
         background-color: burlywood;
         overflow: hidden;
+        position: relative;
+
+        justify-content: center;
+        align-items: center;
+        display: flex;
+
+        padding: 0;
     }
 
-    .StartPageAnimated{
+    .StartPageAnimated {
         background: url("https://i1.adis.ws/i/canon/future_of_forests_header_16x9_dc14bbe1e35040f79bf566eedaf5c8f7?$hero-header-half-16by9-dt$");
-        position: static;
+        background-color: aqua;
-        height: 100vh;
+        position: absolute;
-        height: 100vw;
+        height: 150vh;
-        
+        width: 150vw;
-        transition: all 1000ms cubic-bezier(0.16,1.63,0.01,0.99);
+
+        padding: 0;
+
+        transition: all 1000ms cubic-bezier(0.16, 1.63, 0.01, 0.99);
 
         justify-content: center;
         vertical-align: middle;
@@ -79,4 +105,4 @@
     .rotate45 {
         transform: rotate(-45deg); /* Rotate the element by 45 degrees */
     }
-</style>
+</style>

src/routes/zhen/Utils/Vector2.ts

@@ -0,0 +1,21 @@
+export class Vector2 {
+    x: number;
+    y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+
+    Add(vec2: Vector2){
+        return new Vector2(this.x + vec2.x, this.y + vec2.y);
+    }
+
+    Sub(vec2: Vector2){
+        return new Vector2(this.x - vec2.x, this.y - vec2.y);
+    }
+
+    Scale(mult: number){
+        return new Vector2(this.x * mult, this.y * mult);;
+    }
+}