Rivorn
KPCKevin Powell - Community
•Created by Rivorn on 1/3/2024 in #front-end
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!
4 replies