<div class="outer">
    <!-- This div is important! It lets us specify margin-left later on. -->
    <div>
        <div class="loop"><div class="content"> Ready to stand out? ✦  Ready to stand out? ✦</div></div>
    </div>
</div>


.content {
    font-family: "Inter", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #f5f5f9;
    padding-left: 0.25em;
}

@media only screen and (max-width: 767px) {
    .content {
        font-size: 25vw !important;
        padding-left: 0.25em;
    }
}

.outer {
    overflow: hidden;  !important;
}

.outer div {
    display: inline-block;
}

.loop {
    white-space: nowrap;
    animation: loop-anim 15s linear infinite;
}

@media only screen and (max-width: 767px) {
    .loop {
        animation: loop-anim 13.5s linear infinite;
    }
}

@keyframes loop-anim {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -50% /* This works because of the div between "outer" and "loop" */
    }
}




document.querySelectorAll('.outer').forEach(el =&gt; {
        let content = el.querySelector('.content');

        repeatContent(content, el.offsetWidth);

        let slider = el.querySelector('.loop');
        slider.innerHTML = slider.innerHTML + slider.innerHTML;
});

    
function repeatContent(el, till) {
    let html = el.innerHTML;
    let counter = 0; // prevents infinite loop
    
    while (el.offsetWidth &lt; till &amp;&amp; counter &lt; 100) {
        el.innerHTML += html;
        counter += 1;
    }
}