fix(BOOK-496): Slowed down the MarqueeText component animation

Approved-by: Matilda Landström

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
+        // Base formula: minimum 4000ms, add 60ms per pixel of scroll distance. The duration
-        const baseDuration = 2
+        // includes start and end pauses.
-        const durationPerPixel = 0.05
+        const baseDuration = 4000
-        const calculatedDuration = Math.max(
+        const durationPerPixel = 60
-          baseDuration,
+        const calculatedDuration =
           baseDuration + scrollDistance * durationPerPixel
-        )
 
         parentElement.style.setProperty(
           "--animation-duration",
-          `${calculatedDuration}s`
+          `${calculatedDuration}ms`
         )
       }
     })

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;
+      animation: rightShadow var(--animation-duration) linear infinite;
-    }
-
-    &:has(.overflowing:hover)::before,
-    &:has(.overflowing:hover)::after {
-      animation-play-state: paused;
     }
   }
 }
@@ -61,31 +59,27 @@
   }
 
   &.overflowing {
-    animation: autoScrollText var(--animation-duration, 8s) ease-in-out infinite;
+    animation: autoScrollText var(--animation-duration) linear infinite;
-
-    &:hover {
-      animation-play-state: paused;
-    }
   }
 }
 
 @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;
   }