Skok tekstu przy przewijaniu w poziomie

Cześć, mam taki kod

 <div class='slider'>
            <div class="edge"></div>
            <ul class="slideContainer" id="money_start">
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
                <li class="slideItem">Kim jesteśmy</li>
            </ul>
        </div>

.slider{
    width:100%;
    overflow:hidden;
    position:relative;
    margin:0;
}

ul.slideContainer{
    white-space: nowrap;
    position: relative;
    display: flex;
    gap: 200px;
    overflow: hidden;
    margin-bottom: 64px;
}
li.slideItem{
    list-style:none;
    display:inline-block;
    padding:0 50px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 96px;
    text-align: center;
    letter-spacing: 0;
    white-space: nowrap;
    line-height: 124.8px;
    -webkit-text-stroke: 1px #FFB563 !important;
    color: #FFB563;

}

window.requestAnimationFrame = (function(){
        return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
    })();

    const speed = 5000;
    (function currencySlide(){
        const currencyPairWidth = $('.slideItem:first-child').outerWidth();
        $(".slideContainer").animate({marginLeft:-currencyPairWidth},speed, 'linear', function(){
            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
        });
        requestAnimationFrame(currencySlide);
    })();

i ogólnie działa to ok gdyby nie skok tekstu co kilka chwil. Tutaj jest to widoczne https://drive.google.com/file/d/1W8RoBg3UgqRDd_TsLwLC-jR1hHMBX4_A/view

prosta sprawa, nie bierzesz pod uwagę przerwy pomiędzy elementami. Zamiast gap użyj margin na elementach albo po prostu dodaj 200 do currencyPairWidth.

I następnym razem wrzuć to na jakiegoś sandboxa online żeby dało się tym pobawić: https://jsfiddle.net/hf92c7bq/

ssquad napisał(a):

window.requestAnimationFrame = (function(){
        return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
    })();

Nie musisz już tego pisać w (prawie) 2024 roku - https://caniuse.com/?search=requestAnimationFrame
Chyba że celujesz w IE 9, albo opera mini. Ostatnie przeglądarki które nie miały window.requestAnimationFrame powstały 10 lat temu. Daj już im umrzeć, reszta strony zapewne i tak nie będzie na nich działała i się rozleje. Tym bardziej że w css używasz gap którego te przeglądarki nie rozumieją https://caniuse.com/?search=gap