Inconsistent Duration Calculation in Ticker Component Speed

[HongJungKim-dev]

Version

• react-fast-marquee: 1.6.5
• React: 18.2.0
• Browser: Naver Whale (Chrome-based)
• OS: macOS

Problem Description

While using the Ticker library (specifically the react-fast-marquee component), I observed that the speed of the Ticker component changes unexpectedly when other components are created in the project. The animation speed, controlled by the duration value, appears inconsistent even under identical conditions (e.g., same screen resolution).

Cause Analysis

I investigated the relevant code in the library:

• Source File: Marquee.tsx
• Key Logic: The duration variable, which determines the animation speed, is calculated using marqueeWidth, containerWidth, and speed as follows:

// /src/components/Marquee.tsx  
// Animation duration
const duration = useMemo(() => {
  if (autoFill) {
    return (marqueeWidth * multiplier) / speed;
  } else {
    return marqueeWidth < containerWidth
      ? containerWidth / speed
      : marqueeWidth / speed;
  }
}, [autoFill, containerWidth, marqueeWidth, multiplier, speed]);

This calculated duration is then applied to the CSS styles via the marqueeStyle object:

// /src/components/Marquee.tsx   
const marqueeStyle = useMemo(
  () => ({
    ["--play" as string]: play ? "running" : "paused",
    ["--direction" as string]: direction === "left" ? "normal" : "reverse",
    ["--duration" as string]: `${duration}s`,
    ["--delay" as string]: `${delay}s`,
    ["--iteration-count" as string]: !!loop ? `${loop}` : "infinite",
    ["--min-width" as string]: autoFill ? `auto` : "100%",
  }),
  [play, direction, duration, delay, loop, autoFill]
);

Using the browser’s developer tools (Elements tab), I confirmed that the animation speed varies depending on the duration value. However, the issue is that this duration value changes unpredictably every time the page is reloaded, even when the resolution and other conditions remain constant. This suggests that the calculation might be unstable or influenced by external factors.

Steps to Reproduce

1. Install the react-fast-marquee library at version 1.6.5 (e.g., npm install react-fast-marquee@1.6.5).
2. Set up a project using the react-fast-marquee library (Ticker component).
3. Pass the speed prop to the component.
4. Open the browser and inspect the rendered Ticker component using developer tools.
5. Note the calculated --duration value in the applied styles.
6. Reload the page multiple times at the same resolution.
7. Observe that the --duration value changes with each reload, resulting in inconsistent animation speeds.
8. Add or remove other components in the project and check if the duration calculation is further affected.

Additional Notes

• I reviewed the project’s history and found that PR Recalculate Speed when children change #61 addressed a related issue, but it does not seem to have resolved the instability in the duration calculation.
• I’m unsure if I’ve misunderstood the intended behavior or missed other project-specific conditions (e.g., dynamic resizing, untracked dependencies) that might influence this.
• If this is confirmed as a valid issue in the library, I’d like to know if it’s appropriate for me to attempt a fix and submit a pull request.

[Dichi13]

I encountered similar issue when adding animations to the marquee.

I noticed this bit of code that calculates the width:

// Calculate width of container and marquee and set multiplier
  const calculateWidth = useCallback(() => {
    if (marqueeRef.current && containerRef.current) {
      const containerRect = containerRef.current.getBoundingClientRect();
      const marqueeRect = marqueeRef.current.getBoundingClientRect();
      let containerWidth = containerRect.width;
      let marqueeWidth = marqueeRect.width;

When I logged containerWidth and marqueeWidth to the console, I saw that the values fluctuated significantly during the animation, which might explain the inconsistent marquee speed.

I updated the code to use clientWidth for both widths:

      let containerWidth = containerRef.current.clientWidth;
      let marqueeWidth = marqueeRef.current.clientWidth;

This change seems to have resolved the issue for me, though I'm not completely sure if it caused any unintended side effects (also might be worth trying to replace them with clientHeight for vertical marquee).