Rivorn
KPCKevin Powell - Community
•Created by Rivorn on 1/3/2024 in #front-end
Fixing infinite scroll animation bug
A friend helped fix the bug. His explanation and solution for those who are interested:
Basically the issue is that the keyframe only work perfectly for 10 image? (I saw if it is not 10, it will go crazy) and the animation speed is affected by the image count, the higher the image, the faster the animation this is because of fixed animation speed. The best I can do is I fixed if the image if it is less than 10 and it will loop till 10.
function setScrollerImages(scroller, images) {
const scrollerInner = scroller.querySelector(".scroller__inner");
const totalImages = images.length;
// Clear existing images
scrollerInner.innerHTML = "";
// Calculate the number of times to loop based on 10 images
const loopCount = Math.ceil(10 / totalImages);
// Duplicate the images to reach 10 images
const duplicatedImages = [];
for (let i = 0; i < loopCount; i++) {
duplicatedImages.push(...images);
}
// Append the duplicated images
duplicatedImages.forEach((imageSrc) => {
const imgElement = document.createElement("img");
imgElement.src = imageSrc;
imgElement.alt = "";
imgElement.classList.add("h-72", "w-96", "rounded-2xl");
scrollerInner.appendChild(imgElement);
});
}4 replies
KPCKevin Powell - Community
•Created by Rivorn on 1/3/2024 in #front-end
Fixing infinite scroll animation bug
I reverted the fix on Github so that issue is still visible on Netlify
4 replies
KPCKevin Powell - Community
•Created by Rivorn on 1/3/2024 in #front-end
Fixing infinite scroll animation bug
4 replies