ZeHgS

😭 😭 😭 😭 😭 😭 😭 😭 😭 😭 😭 😭 SOOOO MANY HOURS!!!!! Soooooooooooooo many hours, just to find out that the cause was the stupid 2px border the item had 🤣🤣🤣 🤣🤣🤣 Simply adding box-sizing: border-box; immediately fixed the issue hahahahahahaha can't believe it, I must have created at least 10 MRE 🤪 Thank you all nonetheless! 😁❤️

Hi, Rodrigo! Thank you so much for taking the time to reply. Yes! The reason is that the original helper function, unfortunately, didn't work for my use case, for some reason. The problem is the same exact one that happens in the codepen above. Since I couldn't understand anything that was going on at first, I removed every variable whose value was zero and never changed during any point of the execution just to simplify things, as well as stuff I knew I wouldn't use such as the toIndex function and related code. I didn't change any of the logic, just variable names. In other words, the codepen above is a minimal reproducible example. I do believe I have a significantly better understanding now. However, I don't understand how a constant speed of 100 pixels per second is causing variable speed in actual practice, especially since I verified the calculations and the speed that is passed to GSAP is indeed 100px, as expected. Below is my HTML structure with the original helper function. As you can see, the problem that occurs is the exact same. I would really, really appreciate any help at all you can give me, if you guys have the time. ❤️ https://codepen.io/ZeHgS/pen/XWGzEdj

Hello! How are you guys? I'm new to using GSAP, which is awesome, by the way, and I'm having a little difficulty implementing a responsive full-width, draggable, infinite and auto-scrolling horizontal carousel (phew!!! the god of adjectives must be pleased 🤣). The main problem I'm facing is that the every item's speed is completely different from the others. Strangely, console.log(distanceLoopingPoint/timeUntilElementLoops); Prints out "100" for all elements and the actual speed is indeed set to 100 pixels per second. The code I'm using is a simplified version of the helper function that you guys provide. I didn't alter anything meaningful, I simply removed some stuff that wasn't needed and simplified other stuff like removing parameters that are always zero. I also renamed all variables to help me understand what was going on. I made sure that the animation looks exactly the same as before I simplified stuff. Also, it's not draggable. I've tried fiddling with it a lot and asking for the help of every decent AI I know (ChatGPT 4, Phind and Blackbox AI). How can I have every item move at the same, constant speed and still have it be responsive? Thank you so much! ❤️ https://codepen.io/ZeHgS/pen/qBvVmwm