I am currently working on creating a unique CSS animation that resembles a looped conveyor belt. Essentially, I want the text within a div to disappear off the screen to the right and then reappear from the left.
Here's the approach I've taken so far in an attempt to replicate this effect.
.marquee-section {
position: relative;
min-height: 82px;
}
.marquee-section, .marquee-section * {
overflow: hidden;
}
.marquee {
white-space: nowrap;
}
.marquee-div {
position: absolute;
left: -100%;
animation: move linear 12.5s infinite;
min-width: 100%;
}
@keyframes move {
from { left: -100%; }
to { left: 100%; }<div class="marquee-section">
<div class="marquee-div">
<div class="marquee">START • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • MID • END</div>
</div>
</div>However, I have encountered a challenge where the text only starts from the left again once it completely disappears offscreen to the right. This results in empty space both before and after the text as it moves towards the right.
My goal is to eliminate any white space and instead have text on both the left and right sides of the starting and ending points of the animation. This is a feature commonly seen in Webflow, and you can view an example here.
Is it possible to achieve this using CSS alone? Or are there any frameworks that can facilitate this type of animation?
Any suggestions or guidance on how to achieve this would be greatly appreciated.