I created this code snippet on CodePen to illustrate my point: https://codepen.io/sakana-boy/pen/wvBedWo
.scroll-text {
overflow: hidden;
position: relative;
}
.scroll-text * {
white-space: pre;
transform: translateX(100%);
animation: scroll 5s steps(70, end) infinite;
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}<div class="scroll-text" style="width: 355px;">
<div>hi i am very long text lolololololoololo this is very long sdafkalshgjalwke more text wow ok TOO LONG!!! you Will not See THIS text because it gets cut off : ( very sad </div>
</div>
<div class="scroll-text" style="width: 355px;">
<div>this text is shorter so all the text properly is shown</div>
</div>In essence, I have text that I want to dynamically populate and scroll within a narrower parent div than the text itself. The issue I am facing, as you can see in the CodePen above, is that the scrolling abruptly restarts mid-animation. While I could adjust the value in the 100% keyframe for translateX, I cannot predetermine this value due to the dynamic nature of the text. Furthermore, setting a high value may result in longer text appearing blank in the textbox for an extended period.
Is there a way to dynamically set the keyframe values at 0% and 100% so that the entire text is displayed throughout the animation? The desired behavior is to scroll through all the content without restarting prematurely. I aim to achieve this without increasing the width of the parent divs to prevent text overflow into other elements on my webpage.
If achieving this solely with HTML and CSS is not feasible, I am willing to explore JavaScript solutions, preferably using vanilla JS to avoid incorporating jQuery.