diff --git a/frontend/src/components/ResponsiveMarqueeText.tsx b/frontend/src/components/ResponsiveMarqueeText.tsx index dd3cfdb..366831d 100644 --- a/frontend/src/components/ResponsiveMarqueeText.tsx +++ b/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 = ({ 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 = ({ 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 = ({ 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 = ({ text, className, title }) => { }) await sleep (moveDurationMs) node.style.transition = 'none' + node.style.transform = `translateX(-${ overflowPx }px)` } if (cancelled)