Fixing infinite scroll animation bug
Hi everyone, newbie web developer here. I'm building a website using Tailwind CSS and Vanilla JS in which I've created an infinite scrolling images based on Kevin's video here: https://www.youtube.com/watch?v=iLmBy-HKIAw
I've made some personal changes to it and now would like to add an additional functionality whereby when you click on the arrow buttons it will change the images shown. The issue now is that the JS script that I've added messes up the animation so when the images loop, there's a noticeable 'jump'.
I initially encountered this when I was changing this from horizontal to vertical but I managed to follow along Kevin's instruction to fix the issue as he encountered this issue as well in the video. But for the life of me I can't figure out what's wrong here.
The script also somehow influenced the animation duration that was set up in the CSS so it doesn't actually reflect the timing set there. Removing the JS script fixes all of this.
Full disclosure, I got the script from ChatGPT. I'm hoping I don't get roast to much on that as my JS is still very basic. But I did do my best to understand the script that I was getting from it and to make whatever sense of it to my newbie mind.
I've uploaded the website on netlify: https://main--whimsical-brioche-621f78.netlify.app/
Github Repository: https://github.com/sys3rgy/memora_website
Thank you for your time everyone!
2 Replies
Duplicating the images in the JS script fixes the issue.
I notice Kevin's codes only works when the images are duplicated. In the video Kevin mentioned that there's two ways to implement this whereby you duplicate it in HTML or use JavaScript.
So I messed around and thought to myself what if the reason it's jumping is because the gap made in the CSS was not being used properly. I removed the script from ChatGPT, then commented out the script that duplicated the images. Voila, the bug was reproduced.
So I added the script again from ChatGPT and added more images to the array. Now I'm trying to figure why the cloning function is not working with the ChatGPT script.
Looking forward if anyone have any clues or can point me in the right direction. The code works. It achieves what I wanted front-end wise, but it's still making me feeling dissatisfied since kevin's code is so clean.. mine feels so wacky lol.
I reverted the fix on Github so that issue is still visible on Netlify
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);
});
}