Пользовательская бесконечная анимация каруселей начинает дрожать и замедляется после плавного бега на некоторое время ⇐ Javascript

[Anonymous]

Я работаю над бесконечной анимацией каруселей - анимируя свиток родительского элемента вместо положения элементов. Но после легкого бега на некоторое время анимация замедляется и немного опускается. Я использую anime.js .
Код вызывается в window.addeventListener ("load", () => {...})
Изображение дублируется, чтобы я мог сделать бесконечную повторяющуюся анимацию. Кроме того, изображение, для большинства размеров экрана, больше ширины Viewport. < /P>
Я смотрю на код, что не очень сложное, но понятия не имею, что может вызвать это? PrettyPrint-Override ">

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

const scrollContainer = document.querySelector('#clients-inner');

let scrollAnime; // store the Anime.js animation instance

function createScrollAnimation() {
const clientImg = scrollContainer.querySelector('.client-item:first-child');
const maxScrollLeft = scrollContainer.scrollWidth - scrollContainer.clientWidth;
const scrollBackToSeam = scrollContainer.scrollWidth - scrollContainer.clientWidth - clientImg.clientWidth;
const duration = maxScrollLeft * 20; // Adjust multiplier for speed (e.g., 20ms per pixel)

scrollAnime = anime({
targets: scrollContainer,
scrollLeft: [{
value: maxScrollLeft,
duration: duration,
easing: 'linear'
}, // Scroll to end
],
loop: false, // Loop the entire animation timeline
autoplay: false, // Don't start automatically
round: 1, // Round scrollLeft values to nearest pixel for smoother results
complete: function(anim) {
// When animation reaches the end of the original content,
// instantly jump back to the beginning, which now looks seamless
scrollContainer.scrollLeft = scrollBackToSeam;

anime.remove(scrollContainer); // Remove the previous animation instance
// Restart the animation for a continuous loop
init();
}
});
}

function startScroll() {
if (scrollAnime) {
scrollAnime.play();
}
}

function stopScroll() {
if (scrollAnime) {
scrollAnime.pause();
}
}

function init() {
createScrollAnimation();
startScroll(); // Start scrolling automatically on load
}

// Optional: Pause on hover, resume on mouse leave
scrollContainer.addEventListener('mouseenter', stopScroll);
scrollContainer.addEventListener('mouseleave', startScroll);

// Recalculate animation if container size changes (e.g., window resize)
window.addEventListener('resize', () => {
stopScroll();
anime.remove(scrollContainer); // Remove previous animation
init();
});

init();< /code>



[img]/assets/images/homepage/clients-5.jpg[/img]

[img]/assets/images/homepage/clients-5.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/797 ... er-running