I am trying to create a slider component that slides text from right to left, and if the length of the text is longer than the width of the div element keep moving the text until the end of the text is reached.

The code I have just slides until the beginning of the text hits the left end of the div element, and I am trying to have it move until the end of the string hits the right side of the div. The slider component will have both strings which are shorter than the width, in which case the text should move until the left side of the div, if it is longer than the width it should move the end of the string hits the right side of the div.

Any pointers or suggestions on how I can move this text until the end of the text hits the right side of the div?

code:

.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>

UPDATE

Using a timer I managed to have an animation that stops when a condition is hit. I sense that the animation speeds-up at the end, so I will try a bit further.

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