Create an infinite horizontal scroll animation
Regarding this amazing tutorial: https://www.youtube.com/watch?v=iLmBy-HKIAw&t=524s&ab_channel=KevinPowell. I followed Kevins tutorial and in that video Kevins used max-width of 600px for scroller container, for my project I am using max-width of 1300px for my scrolling container but I still get this "blinking" effect and a lot of empty space between last and first element. My code is the same as Kevins, but it still "blinking", I have short text inside scroller and I am not sure what causes this bug to appear. Do you know how can i solve it? Here is the link to Kevins codesandbox, if you try to change max-width from 600px to 1300px you will get what I am trying to say: https://codepen.io/kevinpowell/pen/BavVLra
Kevin Powell
YouTube
Create an infinite horizontal scroll animation
🎓 Did you know I have courses? Both free and premium ones: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=infinitescroll
Infinite scroll animations for things like logos are relatively common these days, but there is a lot that we can do incorrectly when making one, so I decided to try and make one that respec...
3 Replies
The timing is based on the width. If you change the width, you also have to change the timing to avoid the gap and flash.
I tried as you said but it is still “blinking”.
That means you still don't have the right timing. It's not something that you can just guess or play around with. It requires calculating mathematically the exact animation duration needed based on the distance of travel.