Issue with SmartTicker Rendering

[MiladSadeghi]

Hi there! I've been using SmartTicker and set it up with the following configuration:

<SmartTicker
    smart={false}
    isText={true}
    autoFill={true}
    playOnHover={false}
    pauseOnHover={false}
    playOnClick={false}
    pauseOnClick={false}
    direction={'right'}
    rtl={true}
    infiniteScrollView={true}
    speed={150}
    delay={0}
    iterations={'infinite'}
    disableSelect={true}
>

However, I'm encountering an issue where the output looks incorrect, as shown in the attached clip:

https://github.com/user-attachments/assets/edff6bb1-2b01-4284-a26b-7c08389ed5ad

Could you help identify what might be causing this problem? Thanks in advance!

[eugen-k]

Hi Milad, What's inside the <SmartTicker> tag? Is it just a text content or a tag with the text?

[MiladSadeghi]

Hi Milad, What's inside the <SmartTicker> tag? Is it just a text content or a tag with the text?

its just a text

[eugen-k]

I just tested the component with your settings:

<div style={{ position: 'absolute', top: '50%', width: '800px' }}>
      <SmartTicker
        smart={false}
        isText={true}
        autoFill={true}
        playOnHover={false}
        pauseOnHover={false}
        playOnClick={false}
        pauseOnClick={false}
        direction={'right'}
        rtl={true}
        infiniteScrollView={true}
        speed={150}
        delay={0}
        iterations={'infinite'}
        disableSelect={true}
      >
چند متن به زبان فارسی
      </SmartTicker>
</div>

It looks like it works correctly. Please check again what might be wrong with your setup.

https://github.com/user-attachments/assets/babf8a84-b8ac-42e1-af03-abbc60b4fc5e

[eugen-k]

Hi Milad, were you able to figure out the problem? Can I close the issue?

[MiladSadeghi]

Apologies for the delayed response!

Here is the NowPlaying component I'm working with:

function NowPlaying({ image, title, newsId }: Props) {
  return (
    <Link to={`/news/${newsId}`} className="align-items-center flex w-[350px]">
      <img
        width={100}
        height={70}
        loading="lazy"
        src={image}
        className="rounded-sm"
        alt="track image"
      />
      <div className="my-auto mr-2 w-full overflow-hidden">
        <SmartTicker
          smart={false}
          isText={true}
          autoFill={true}
          playOnHover={false}
          pauseOnHover={false}
          playOnClick={false}
          pauseOnClick={false}
          direction="right"
          rtl={true}
          infiniteScrollView={true}
          speed={150}
          delay={0}
          iterations="infinite"
          disableSelect={true}
        >
          <p className="text-white">{title}</p>
        </SmartTicker>
      </div>
    </Link>
  );
}

There’s no local state inside this component (though I manage some state in the parent component using local state and Zustand). However, the behavior still isn’t working as expected, and the previous issue remains unresolved. I encountered a new issue while doing further development on my app. Also, I implemented the marquee effect using only Tailwind, without any external package. I saw your response, and I realized I need to fix the problem.

This is new mess: https://github.com/user-attachments/assets/3c0415bc-902c-45f2-8bf2-a060c663f50e

In the parent component, I have an audio player. When I pause the audio, the output looks like this: https://github.com/user-attachments/assets/5c34f0a5-7205-4e88-a92d-ba92d1790a04

update: I realized that whenever any state or Zustand store in the parent component updates, the animation restarts!

[eugen-k]

The problem is the

tag that is a block element by its nature. So when the component is trying to get the size of the text (to know if it fits or not), the size is always equal to the full width of the block. I'm going to add a "className" param to a ticker so it will be possible to pass a CSS class name to a ticker. But for now, I would suggest removing

tag and placing just the {title} as a child. The styles should be moved into the "style" parameter, like this:

<SmartTicker
          smart={false}
          isText={true}
          autoFill={true}
          playOnHover={false}
          pauseOnHover={false}
          playOnClick={false}
          pauseOnClick={false}
          direction="right"
          rtl={true}
          infiniteScrollView={true}
          speed={150}
          delay={0}
          iterations="infinite"
          disableSelect={true}
          style={{color: "FFF"}}
        >
          {title}
        </SmartTicker>

[MiladSadeghi]

Okay, thanks! What about the earlier issue? That one didn’t display like a marquee. Here’s the current situation: https://github.com/user-attachments/assets/025b4ff6-6e6e-4d56-839f-a5371e80e00f