Creo una función de reacción con userref. detectará si el texto se desborda y agregará una clase que hace que el texto se desplace.

aquí el código:

 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]);

Código HTML con su 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; }

pero cuando el texto comenzó a moverse fuera del contenedor, el número de scrollWidth comenzó a disminuir y la animación de la marquesina se detuvo.

¿Cómo puedo arreglar esto?

Gracias y perdón por mi mal inglés.