fix news ticker scrolling

Author: Llewellyn500

app/globals.css

@@ -143,6 +143,19 @@
   font-display: swap;
 }
 
+@keyframes ticker {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.animate-ticker {
+  animation: ticker 75s linear infinite;
+}
+
 @font-face {
   font-family: "General Sans";
   font-weight: 600;

components/NewsTicker/NewsTicker.tsx

@@ -1,48 +1,24 @@
-"use client";
+import { useEffect, useRef, useState } from "react";
 
-import gsap from "gsap";
-import { useEffect, useRef } from "react";
+// Static mission statements
+const news = [
+  "Welcome to LAP Docs, our mission is to provide you with the best possible tutorials that is easy to understand and follow. I hope you enjoy your stay with us and our tutorials actually help you learn something new.",
+  "Our Motto: Simplicity in Tech",
+  "Our Goal: Simplifying tech for everyone",
+];
 
 export default function NewsTicker() {
-  const tickerRef = useRef<HTMLDivElement | null>(null);
-
-  // Static mission statements
-  const news = [
-    "Welcome to LAP Docs, our mission is to provide you with the best possible tutorials that is easy to understand and follow. I hope you enjoy your stay with us and our tutorials actually help you learn something new.",
-    "Our Motto: Simplicity in Tech",
-    "Our Goal: Simplifying tech for everyone",
-  ];
-
-  useEffect(() => {
-    const ticker = tickerRef.current;
-
-    if (ticker && news.length > 0) {
-      const tickerWidth = ticker.scrollWidth / 2; // Half because we are duplicating items
-
-      gsap.to(ticker, {
-        x: `-${tickerWidth}px`,
-        duration: 75, // Faster duration for shorter text
-        ease: "linear",
-        repeat: -1,
-        onRepeat: () => {
-          gsap.set(ticker, { x: 0 });
-        },
-      });
-    }
-  }, [news]);
-
   return (
     <div className="flex bg-[#8a2be2] text-white py-5 max-w-[95rem] w-full mx-auto relative overflow-hidden">
-      <div className="bg-[#8a2be2] z-10 px-6">
+      <div className="bg-[#8a2be2] z-10 px-6 absolute left-0 top-0 h-full flex items-center">
         <span className="flex gap-2 bg-[#8a2be2] font-semibold uppercase whitespace-nowrap">
           <p>MISSION:</p>
-          <p className="block sm:hidden">+++</p>
         </span>
       </div>
       {/* News ticker container */}
-      <div className="relative flex overflow-hidden w-full">
-        <div ref={tickerRef} className="flex gap-4 whitespace-nowrap">
-          {/* First set - visible to screen readers and crawlers */}
+      <div className="relative flex overflow-hidden w-full pl-32 sm:pl-40">
+        <div className="flex gap-4 whitespace-nowrap animate-ticker w-fit">
+          {/* First set - visible to screen readers */}
           {news.map((newsItem, index) => (
             <div
               key={`original-${index}`}
@@ -51,8 +27,8 @@ export default function NewsTicker() {
               <p>{newsItem} +++</p>
             </div>
           ))}
-          {/* Duplicated sets for animation - hidden from assistive tech */}
-          {[...news, ...news, ...news].map((newsItem, index) => (
+          {/* Duplicate set for seamless looping */}
+          {news.map((newsItem, index) => (
             <div
               key={`duplicate-${index}`}
               className="text-white text-lg font-normal"