feat: add cursor animation

vittxr · Jul 20, 2024 · f005308 · f005308
1 parent e7c3894
commit f005308
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 55 deletions.
diff --git a/src/app.css b/src/app.css
@@ -12,4 +12,29 @@ html, body {
     @apply transition-colors;
     @apply duration-200;
     @apply hover:underline
+}
+
+.cursor {
+  position: fixed;
+  width: 40px;
+  height: 40px;
+  margin-left: -20px;
+  margin-top: -20px;
+  border-radius: 50%;
+  border: 2px solid #FBAB7E;
+  transition: transform 0.3s ease;
+  transform-origin: center center;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.grow, .grow-small {
+  transform: scale(4);
+  background: white;
+  mix-blend-mode: difference; 
+  border: none;
+}
+
+.grow-small {
+  transform: scale(2);
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,18 +1,75 @@
-<script>
+<script lang="ts">
   import '../app.css';
-  import { browser } from '$app/environment';
   import '$lib/i18n';
-  import { locale, waitLocale, isLoading } from 'svelte-i18n';
   import Base from './_fragments/Base.svelte';
+  import { gsap } from 'gsap';
+  import { browser } from '$app/environment';
+  import { locale, waitLocale, isLoading } from 'svelte-i18n';
+  import { onMount, beforeUpdate, afterUpdate } from 'svelte';
+
+  let cursor: HTMLDivElement | null = null;
+  let cursorScale = [];
+  let mouseX = 0;
+  let mouseY = 0;
 
   export const load = async () => {
     if (browser) {
       locale.set(window.navigator.language);
     }
     await waitLocale();
   };
+
+  onMount(() => {
+    // Initial setup if needed
+  });
+
+  beforeUpdate(() => {
+    // Any setup before the DOM update
+  });
+
+  afterUpdate(() => {
+    cursorScale = Array.from(document.querySelectorAll('.cursor-scale'));
+
+    gsap.to({}, 0.016, {
+      repeat: -1,
+      onRepeat: function () {
+        gsap.set(cursor, {
+          css: {
+            left: mouseX,
+            top: mouseY,
+          },
+        });
+      },
+    });
+
+    window.addEventListener('mousemove', (e) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+    });
+
+    cursor?.classList.remove('grow');
+    cursor?.classList.remove('grow-small');
+
+    cursorScale.forEach((item) => {
+      console.log('cursor: ', cursor);
+      item.addEventListener('mousemove', () => {
+        cursor?.classList.add('grow');
+        if (item.classList.contains('cursor-scale')) {
+          cursor?.classList.remove('grow');
+          cursor?.classList.add('grow-small');
+        }
+      });
+
+      item.addEventListener('mouseleave', () => {
+        cursor?.classList.remove('grow');
+        cursor?.classList.remove('grow-small');
+      });
+    });
+  });
 </script>
 
+<div bind:this={cursor} class="cursor"></div>
+
 {#if $isLoading}
   Please wait...
 {:else}

diff --git a/src/routes/_fragments/Base.svelte b/src/routes/_fragments/Base.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
   import Header from '$routes/_fragments/Header/index.svelte';
   import Footer from './Footer.svelte';
+  export let className: string = '';
 </script>
 
-<div class="px-10 py-10 min-h-screen flex flex-col dark:bg-gray-950 text-black dark:text-white">
+<div
+  class="px-10 py-10 min-h-screen flex flex-col dark:bg-gray-950 text-black dark:text-white {className}"
+>
   <Header />
 
   <main class="flex-grow flex flex-col items-center justify-center">

diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
@@ -1,56 +1,10 @@
-<script>
-  import { gsap } from 'gsap';
+<script lang="ts">
   import { _ } from 'svelte-i18n';
   import HeroSection from '$routes/home/fragments/HeroSection.svelte';
-  import { onMount } from 'svelte';
-
-  let cursor = null;
-  let cursorScale = [];
-  let mouseX = 0;
-  let mouseY = 0;
-
-  onMount(() => {
-    // Bind cursor and cursorScale here
-    // cursorScale = Array.from(document.querySelectorAll('.cursor-scale'));
-
-    window.addEventListener('mousemove', (e) => {
-      mouseX = e.clientX;
-      mouseY = e.clientY;
-    });
-
-    gsap.to({}, 0.016, {
-      repeat: -1,
-      onRepeat: function () {
-        gsap.set(cursor, {
-          css: {
-            left: mouseX,
-            top: mouseY,
-          },
-        });
-      },
-    });
-
-    // cursorScale.forEach((link) => {
-    //   link.addEventListener('mousemove', () => {
-    //     cursor.classList.add('grow');
-    //     if (link.classList.contains('small')) {
-    //       cursor.classList.remove('grow');
-    //       cursor.classList.add('grow-small');
-    //     }
-    //   });
-
-    //   link.addEventListener('mouseleave', () => {
-    //     cursor.classList.remove('grow');
-    //     cursor.classList.remove('grow-small');
-    //   });
-    // });
-  });
 </script>
 
 <svelte:head>
   <title>vschirmer / home</title>
 </svelte:head>
 
-<div bind:this={cursor} class="cursor"></div>
-
 <HeroSection className="h-full" />
diff --git a/src/routes/home/fragments/HeroSection.svelte b/src/routes/home/fragments/HeroSection.svelte
@@ -6,16 +6,16 @@
   export let className: string = '';
 </script>
 
-<div class="w-full h-full sm:flex items-center {className} ">
+<div class="w-full h-full sm:flex items-center {className}">
   <div
     class="w-full h-full space-y-2 pb-10 flex flex-col items-center sm:items-start text-center sm:text-left"
   >
-    <h1 class="text-7xl font-bold">Vitor Schirmer</h1>
-    <h2 class="text-4xl">
+    <h1 class="text-7xl font-bold cursor-scale">Vitor Schirmer</h1>
+    <h2 class="text-4xl cursor-scale">
       {$_('hero_section.description')}
     </h2>
 
-    <div class="w-full mt-2 flex flex-col items-center sm:items-start">
+    <div class="w-full mt-2 flex flex-col items-center sm:items-start cursor-scale">
       <Link
         href="/about"
         classname="group mt-2 flex items-center text-lg font-medium"