Horizontal carousel totalwidth is not expanded.

[LuLUE7775]

Hi,

I am using Next.js with GSAP.

I discovered that the horizontal length does not expand according to the width of the images when users redirect from other pages.

Somehow, it works if the home page is refreshed.

In the horizontal helper function, I noticed that items[length - 1].offsetLeft is not the total width that should be added up.

Any help would be greatly appreciated!

https://codesandbox.io/p/devbox/gsap-horizontal-infinite-carousel-lzn99z?file=%2Fapp%2Fcomponents%2FSlider.jsx%3A41%2C16

 

[Rodrigo]

Hi,

 

I couldn't really tell you what could be the issue in your demo, but most likely it stems from the images not being completely loaded when the loop is created.

 

This demo seems to be working as expected with Next's Image component:

https://stackblitz.com/edit/stackblitz-starters-mzh4mt?file=app%2Fpage.tsx

 

Finally I noticed you don't have the latest version of the Helper Function. Is always a good idea to copy/paste the version in the docs, since that is the latest one:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Hopefully this helps.

Happy Tweening!