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

[Anonymous]

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

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

// Recalculate animation if container size changes (e.g., window resize)
window.addEventListener('resize', () => {
stopScroll();
anime.remove(scrollContainer); // Remove previous animation
init();
});
< /code>
Слишком много вызывает возникновение проблемы, но почему именно?function carousel()
{
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();
}

window.addEventListener('load', carousel);< /code>
#clients-inner {
width: 100%;
overflow-x: scroll;
white-space: nowrap;

img {
max-height: 36px;
}
}< /code>




[img]https://i.ibb.co/bjxqb7hH/clients-5.jpg[/img]

[img]https://i.ibb.co/bjxqb7hH/clients-5.jpg[/img]

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