Estoy tratando de crear un componente slider que deslice el texto de derecha a izquierda, y si la longitud del texto es más larga que el ancho del elemento div, siga moviendo el texto hasta llegar al final del texto.

El código que tengo simplemente se desliza hasta que el comienzo del texto toca el extremo izquierdo del elemento div, y estoy tratando de moverlo hasta que el final de la cadena toca el lado derecho del div. El componente deslizante tendrá ambas cadenas que son más cortas que el ancho, en cuyo caso el texto debe moverse hasta el lado izquierdo del div, si es más largo que el ancho, debe moverse, el final de la cadena llega al lado derecho del div. división

¿Algún consejo o sugerencia sobre cómo puedo mover este texto hasta que el final del texto llegue al lado derecho del div?

código:

 .slider { width: 100%; overflow: hidden; margin-left: 300px; background-color: aqua; } .slider h2 { animation: slide-left 10s; } @keyframes slide-left { from { margin-left: 100%; } to { margin-left: 0%; } } @keyframes slide-right { to { transform:translateX(0); } }

 <div className="slider"> <h2>Hello world, I need a very long text to show how the text will move</h2> </div>

ACTUALIZAR

Usando un temporizador logré tener una animación que se detiene cuando se alcanza una condición. Siento que la animación se acelera al final, así que intentaré un poco más.

 .slider { width: 100%; overflow: hidden; margin-left: 300px; background-color: aqua; } .slider h2 { animation: slide-left 30s; animation-play-state: paused; } @keyframes slide-left { from { margin-left: 0%; } to { margin-left: -1000%; } } @keyframes slide-right { to { transform:translateX(0); } }

 useEffect(() => { if(executeTimer){ let interval = setInterval(() => { let sliderElement = document.getElementById('slider'); let sliderWidth = sliderElement.clientWidth; setCounter(counter + 1); if(counter === 100){ document.getElementById("slider").style.animationPlayState = "running"; } if(sliderWidth >= sliderElement.scrollWidth) { setExecuteTimer(false); document.getElementById("slider").style.animationPlayState = "paused"; } },10); return () => clearInterval(interval); } }, [executeTimer, counter]);

 return ( <div className="slider" id="slider-container"> <h2 id="slider">Hello world, this is just a little bit longer; no it needs to be just a little bit longer</h2> </div> );