frontend/src/components/ResponsiveMarqueeText.tsx

@@ -12,7 +12,7 @@ const DESKTOP_MARQUEE_MEDIA =
     '(min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)'
 const MARQUEE_START_DELAY_MS = 1600
 const MARQUEE_END_HOLD_MS = 2400
-const MARQUEE_SCROLL_PX_PER_SECOND = 64
+const MARQUEE_SCROLL_PX_PER_SECOND = 43
 const MIN_MARQUEE_OVERFLOW_PX = 1
 
 
@@ -100,14 +100,19 @@ const ResponsiveMarqueeText: FC<Props> = ({ text, className, title }) => {
         && animated != null)
 
     const resetAnimated = () => {
+      const node = animatedRef.current
+
       animationRef.current?.cancel ()
       animationRef.current = null
+      node?.getAnimations?.().forEach (animation => {
+        animation.cancel ()
+      })
 
-      if (!(animated))
+      if (!(node))
         return
 
-      animated.style.transition = 'none'
-      animated.style.transform = 'translateX(0)'
+      node.style.transition = 'none'
+      node.style.transform = 'translateX(0)'
     }
 
     if (!canMarquee)
@@ -129,21 +134,15 @@ const ResponsiveMarqueeText: FC<Props> = ({ text, className, title }) => {
 	})
 
     const runLoop = async () => {
-      let started = false
-
       while (!cancelled)
         {
           resetAnimated ()
-          if (!started)
-            setMarqueeVisible (false)
+          setMarqueeVisible (true)
 
           await sleep (MARQUEE_START_DELAY_MS)
           if (cancelled || !(animatedRef.current))
             break
 
-          setMarqueeVisible (true)
-          started = true
-
           const moveDurationMs =
 	      overflowPx / MARQUEE_SCROLL_PX_PER_SECOND * 1000
           const node = animatedRef.current
@@ -165,6 +164,11 @@ const ResponsiveMarqueeText: FC<Props> = ({ text, className, title }) => {
               {
                 break
               }
+
+              node.style.transform = `translateX(-${ overflowPx }px)`
+              animation.cancel ()
+              if (animationRef.current === animation)
+                animationRef.current = null
             }
           else
             {
@@ -178,6 +182,7 @@ const ResponsiveMarqueeText: FC<Props> = ({ text, className, title }) => {
               })
               await sleep (moveDurationMs)
               node.style.transition = 'none'
+              node.style.transform = `translateX(-${ overflowPx }px)`
             }
 
           if (cancelled)