Help with full-width, draggable, infinite and auto-scrolling horizontal carousel

[ZeHgS]

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! ❤️ 

 

See the Pen qBvVmwm by ZeHgS (@ZeHgS) on CodePen

[Rodrigo]

Hi @ZeHgS and welcome to the GSAP Forums!

 

If I was you I wouldn't touch anything on the helper function. Any particular reason for that?

 

The helper functions are built with performance as a paramount, so I can guarantee you that either if some values don't seem to change, or are seemingly unused there is a good reason for them and it would be better to just keep them there. 

 

Here is a demo of the horizontal loop using Draggable as well:

See the Pen gOvvJee by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[ZeHgS]

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. ❤️
 

See the Pen XWGzEdj by ZeHgS (@ZeHgS) on CodePen

[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! 😁❤️ 

[Rodrigo]

Hi,

 

Is great that you were able to solve it!

 

Yeah it's always a good idea to use box-sizing: border-box; by default in a global way:

* {
  box-sizing: border-box;
}

Most CSS frameworks (bootstrap, tailwind, normalize, etc) use that particular selector, so it's always a good idea to set it yourself if you're not using a CSS library.

 

Finally I wish I can tell you that this is going to be the last time you'll invest a considerable amount of time trying to solve something trivial, but I can guarantee you that this will happen again (happens to all of us), so just learn from it and keep going!

 

Happy Tweening!