Using CSS to slide text from right to left until the end the text string

Question

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

Answer 1

I have a similar need so here's the solution I've came up with.

transform: translateX(calc(-100% + 200px));

This did the trick for me.

Only issue is that the speed of the scrolling depends on the length of the text. It doesn't bother me so I won't be trying to 'fix' it.

:root {
  --slider-width: 400px;
}

body {
  background-color: gray;
}

.slider {
  width: var(--slider-width);
  height: 40px;
  overflow: hidden;
  background-color: blue;
  white-space: nowrap;
}

.text {
  font-size:26px;
  display: inline-block;
  animation: slide 20s linear infinite;
}

@keyframes slide {
    0% {
        transform: translateX(0%);
    }

    50% {
        transform: translateX(calc(-100% + var(--slider-width)));
    }
    
    100% {
        transform: translateX(0%);
    }
}

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

I hope this will help you.