I create a react function with useref. it will detect if the text gets overflowed and it will add a class that makes the text scroll.

here the code:

  const refSp = createRef();
  useLayoutEffect(() => {
    if (
      refSp &&
      refSp.current &&
      refSp.current.clientWidth &&
      refSp.current.scrollWidth
    ) {
      if (refSp.current.clientWidth < refSp.current.scrollWidth) {
        console.log(refSp.current.scrollWidth);
      }
    }
  }, [refSp]);

HTML code with it's css:

            <p id="artis" ref={refSp}>
              <span className="marquee">
                <span id="scorll">{items.title}</span>
              </span>
            </p>

.metadata p {
  width: 86%;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
}

.marquee {
  display: inline-block;
  height: 30px;
  position: absolute;
  overflow: hidden;
  z-index: -1;
  animation: marquee 15s linear infinite;
}

but when the text started to move outside of the container the scrollWidth number started to decrease and the marquee animation stopped.

How can I fix this?

Thank you and sorry for my bad English.