From fa10abbe78d5ef05b76ca24fbeb2b2a71ef3779f Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 4 Nov 2025 10:29:20 +0000
Subject: [PATCH] fix(BOOK-496): Slowed down the MarqueeText component
 animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../components/MarqueeText/index.tsx          | 13 ++++----
 .../MarqueeText/marqueeText.module.css        | 32 ++++++++-----------
 2 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/apps/scandic-web/components/MarqueeText/index.tsx b/apps/scandic-web/components/MarqueeText/index.tsx
index 272967428..79cf90037 100644
--- a/apps/scandic-web/components/MarqueeText/index.tsx
+++ b/apps/scandic-web/components/MarqueeText/index.tsx
@@ -52,17 +52,16 @@ export function MarqueeText({
 
         // Calculate dynamic animation duration based on scroll distance
         // This is done to avoid long scrolling durations for small distances and vice versa
-        // Base formula: minimum 2s, add 50ms per pixel of scroll distance
-        const baseDuration = 2
-        const durationPerPixel = 0.05
-        const calculatedDuration = Math.max(
-          baseDuration,
+        // Base formula: minimum 4000ms, add 60ms per pixel of scroll distance. The duration
+        // includes start and end pauses.
+        const baseDuration = 4000
+        const durationPerPixel = 60
+        const calculatedDuration =
           baseDuration + scrollDistance * durationPerPixel
-        )
 
         parentElement.style.setProperty(
           "--animation-duration",
-          `${calculatedDuration}s`
+          `${calculatedDuration}ms`
         )
       }
     })
diff --git a/apps/scandic-web/components/MarqueeText/marqueeText.module.css b/apps/scandic-web/components/MarqueeText/marqueeText.module.css
index 0b5cbc587..2e8f2405e 100644
--- a/apps/scandic-web/components/MarqueeText/marqueeText.module.css
+++ b/apps/scandic-web/components/MarqueeText/marqueeText.module.css
@@ -1,4 +1,7 @@
 .marqueeText {
+  --animation-duration: 14000ms;
+  --scroll-distance: 0;
+  --marquee-background-color: transparent;
   background-color: var(--marquee-background-color);
   position: relative;
   flex-shrink: 1;
@@ -21,7 +24,7 @@
       z-index: 2;
       pointer-events: none;
       opacity: 0;
-      animation: leftShadow var(--animation-duration, 8s) linear infinite;
+      animation: leftShadow var(--animation-duration) linear infinite;
     }
 
     &::after {
@@ -39,12 +42,7 @@
       z-index: 2;
       pointer-events: none;
       opacity: 1;
-      animation: rightShadow var(--animation-duration, 8s) linear infinite;
-    }
-
-    &:has(.overflowing:hover)::before,
-    &:has(.overflowing:hover)::after {
-      animation-play-state: paused;
+      animation: rightShadow var(--animation-duration) linear infinite;
     }
   }
 }
@@ -61,31 +59,27 @@
   }
 
   &.overflowing {
-    animation: autoScrollText var(--animation-duration, 8s) ease-in-out infinite;
-
-    &:hover {
-      animation-play-state: paused;
-    }
+    animation: autoScrollText var(--animation-duration) linear infinite;
   }
 }
 
 @keyframes autoScrollText {
   0%,
-  15% {
+  10% {
     transform: translateX(0);
   }
-  80%,
+  75%,
   100% {
-    transform: translateX(calc(-1 * var(--scroll-distance, 50px)));
+    transform: translateX(calc(-1 * var(--scroll-distance)));
   }
 }
 
 @keyframes leftShadow {
   0%,
-  16% {
+  11% {
     opacity: 0;
   }
-  17%,
+  12%,
   100% {
     opacity: 1;
   }
@@ -93,10 +87,10 @@
 
 @keyframes rightShadow {
   0%,
-  79% {
+  74% {
     opacity: 1;
   }
-  80%,
+  75%,
   100% {
     opacity: 0;
   }