fix: improve marquee animation and adjust positioning

Author: hetari

src/components/design/Marquee.vue

@@ -1,26 +1,29 @@
 <template>
   <section
     id="marquee-section"
-    class="text-flax-smoke-200 relative mb-60 h-fit w-full overflow-clip leading-none"
-    style="height: clamp(3.5rem, 2.3571rem + 8.5143vw, 10.5rem)"
+    class="text-flax-smoke-200 relative mb-50 h-fit w-full overflow-clip leading-none will-change-auto"
   >
-    <div id="marquee-1" class="flex" role="marquee">
+    <div id="marquee-1" class="flex h-fit translate-y-0" role="marquee">
       <h4
         v-for="i in 3"
         :key="`marquee1-${i}`"
-        class="heading-1 sm:heading-1 flex items-center font-bold text-nowrap whitespace-nowrap"
+        class="heading-1 sm:heading-1 flex items-center font-bold text-nowrap whitespace-nowrap will-change-auto"
       >
         Full Stack Developer
-        <div class="w-fit sm:mx-10 sm:scale-75">
+        <div class="mx-4 w-fit sm:mx-10 sm:scale-75">
           <component :is="icons[(i - 1) % icons.length]" />
         </div>
       </h4>
     </div>
-    <div id="marquee-2" class="flex" role="marquee">
+    <div
+      id="marquee-2"
+      class="absolute bottom-0 z-50 flex h-fit translate-y-full"
+      role="marquee"
+    >
       <h4
         v-for="i in 3"
         :key="`marquee2-${i}`"
-        class="heading-1 sm:heading-1 flex items-center font-bold text-nowrap whitespace-nowrap"
+        class="heading-1 sm:heading-1 flex items-center font-bold text-nowrap whitespace-nowrap will-change-auto"
       >
         Full Stack Developer
         <div class="w-fit sm:mx-10 sm:scale-75">
@@ -54,14 +57,14 @@
     horizontalLoop(marquee1, {
       xPercent: -100,
       repeat: -1,
-      speed: 0.7,
+      speed: 0.8,
     });
 
     // Horizontal loop for marquee-2 (opposite direction)
     horizontalLoop(marquee2, {
       xPercent: 100,
       repeat: -1,
-      speed: 0.7,
+      speed: 0.8,
       reversed: true,
     });
 
@@ -83,31 +86,31 @@
     function initMarqueeAnimations() {
       // Animate marquee-1 upwards
       gsap.to('#marquee-1', {
-        y: -100,
+        yPercent: -100,
         duration: 1,
         ease: 'power2.inOut',
       });
-
-      // Animate marquee-2 downwards
+      // // Animate marquee-2 downwards
       gsap.to('#marquee-2', {
-        y: -90,
+        yPercent: 0,
         duration: 1,
+        top: '-100%',
         ease: 'power2.inOut',
       });
     }
 
     function resetMarqueeAnimations() {
       // Reset marquee-1 position
       gsap.to('#marquee-1', {
-        y: 0,
+        yPercent: 0,
         duration: 1,
         ease: 'power2.inOut',
       });
-
-      // Reset marquee-2 position
+      // // Reset marquee-2 position
       gsap.to('#marquee-2', {
-        y: 100,
+        yPercent: 100,
         duration: 1,
+        top: '0%',
         ease: 'power2.inOut',
       });
     }

src/components/design/Slider.vue

@@ -20,7 +20,7 @@
           </div>
           <div id="quote-tags" class="flex gap-3">
             <p
-              class="rounded-full border border-flax-smoke-500 px-3 uppercase text-flax-smoke-600"
+              class="border-flax-smoke-500 text-flax-smoke-600 rounded-full border px-3 uppercase"
               v-for="i in people[index].tags"
               :key="i"
             >
@@ -69,7 +69,7 @@
         />
         <div
           id="quote-overlay"
-          class="absolute inset-0 z-50 rounded-lg bg-flax-smoke-500"
+          class="bg-flax-smoke-500 absolute inset-0 z-50 rounded-lg"
         ></div>
       </div>
     </template>
@@ -78,9 +78,9 @@
     <template v-else>
       <div class="col-span-full">
         <template v-for="(p, i) in people" :key="i">
-          <div class="mt-10 grid w-full grid-cols-4 items-start">
+          <div class="mt-10 grid w-full grid-cols-5 items-start sm:grid-cols-4">
             <div
-              class="columns-gap heading-2 relative col-span-1 flex h-full flex-col font-bold leading-none"
+              class="columns-gap heading-2 relative col-span-1 flex h-full flex-col leading-none font-bold"
             >
               {{ (i + 1).toString().padStart(2, '0') }}
             </div>
@@ -93,7 +93,7 @@
                 />
 
                 <p
-                  class="heading-4 mt-4 max-w-[25ch] font-semibold leading-none"
+                  class="heading-4 mt-4 max-w-[25ch] leading-none font-semibold"
                 >
                   " {{ p.quote }} "
                 </p>
@@ -106,10 +106,10 @@
                 </div>
 
                 <div
-                  class="flex max-w-60 flex-wrap gap-3 uppercase leading-[200%]"
+                  class="flex max-w-60 flex-wrap gap-3 leading-[200%] uppercase"
                 >
                   <p
-                    class="text-nowrap rounded-full border border-flax-smoke-500 px-3 uppercase text-flax-smoke-600"
+                    class="border-flax-smoke-500 text-flax-smoke-600 rounded-full border px-3 text-nowrap uppercase"
                     v-for="i in p.tags"
                     :key="i"
                   >

src/style.css

@@ -190,6 +190,9 @@ layer(base);
     background-color: #000000;
   } */
 
+  html {
+    @apply overflow-x-clip;
+  }
   body {
     @apply light-theme overflow-x-clip;
   }