Как сделать бесконечную прокрутку поведения без неожиданного прыжка ⇐ Javascript

[Anonymous]

Я работаю над реализацией функции бесконечной прокрутки для списка изображений, но я сталкиваюсь с проблемой, в которой поведение прокрутки не является гладким - оно неожиданно прыгает. Это нарушает пользовательский опыт, и я не уверен, что это вызывает. Ниже приведен код, который я использую. Я бы признателен за какое-либо понимание того, что может быть неправильным и как это исправить?

Код: Выделить всё

const partnersImg = [
[img]https://picsum.photos/100/300?1[/img]
,
[img]https://picsum.photos/100/300?2[/img]
,
[img]https://picsum.photos/100/300?3[/img]
,
[img]https://picsum.photos/100/300?4[/img]
,
[img]https://picsum.photos/200/300?5[/img]
,
[img]https://picsum.photos/300/300?6[/img]
,
];

const InfiniteScroll = () => {
return (

{/*  */}

{[...partnersImg, ...partnersImg, ...partnersImg, ...partnersImg].map((item, index) => (
item
))}


);
};

ReactDOM.render(, document.getElementById('root'));

Код: Выделить всё

.partners-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
display: flex;
justify-content: center;
}

.partners {
display: flex;
gap: 40px;
animation: scroll-left 10s linear infinite;
will-change: transform;
}

@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.prt-img {
width: 100px;
}
.prt-img2 {
width: 200px;
}
.prt-img3 {
width: 50px;
}

Код: Выделить всё

это продолжает прыгать, как мне решить?

Подробнее здесь: https://stackoverflow.com/questions/793 ... expectedly