My horizontal infinite image slider with different widths is messed up.

[asteroidtoastnetwork]

Hello,  I can't get an infinite horizontal image slider to work correctly,

Images are getting positionned incorrectly, because they have different widths.

 

"My code" is here:

codepen.io/eze4fz4e4zegzegzeg/pen/bGzRoRM

 

It's based on this Codepen:

codepen.io/supah/pen/VwegJwV

 

It's very close to it, except my images each have different widths and a common height.

 

On "My code" HTML i've changed each image widths using style="width:XXvw"

I also changed wrapWidth so that it is a sum of all the items clientWidth

let wrapWidth = 0;

for (let i = 0; i < $items.length; i++) {
  wrapWidth += $items[i].clientWidth;
}

 

On the original codepen, it's using let itemWidth = $items[0].clientWidth

So I also changed the dispose() function's set() and wrap(), so that it doesn't use the first item's clientWidth, like this:

const dispose = (scroll) => {
  gsap.set($items, {
    x: (i) => {
      // Use the clientWidth of each item in $items
      return i * $items[i].clientWidth + scroll;
    },
    modifiers: {
      x: (x, target) => {
        const currentIndex = Array.from($items).indexOf(target);
        // Wrap based on the clientWidth of the current item
        const s = gsap.utils.wrap(-$items[currentIndex].clientWidth, wrapWidth - $items[currentIndex].clientWidth, parseInt(x));
        return `${s}px`;
      },
    },
  });
};
dispose(0)

 

Would you know how I can fix my codepen?

I think the problem is in the dispose() function where the index is getting messed up.. But I don't get it

 

Thank you for reading

See the Pen bGzRoRM by eze4fz4e4zegzegzeg (@eze4fz4e4zegzegzeg) on CodePen

[mvaneijgen]

Hi @asteroidtoastnetwork welcome to the forum!

 

Take a look at the amazing seamless loop helper fucntion (https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/)

 

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

 

I don't know what your original source uses, but only GSAP gets loaded (and an old version) it also uses a lot of custom code  (that we can't really help with). The above version uses all the nice GSAP plugins, which save you a lot of time setting up and gives you handle bars to tweak it to your liking. 

 

Hope it helps and happy tweening! 

[asteroidtoastnetwork]

Hi @mvaneijgen thank you for your reply 😍

 

I didn't know that this helper existed. I understand it's a good solution.

Although I'm unable to get the Inertia Plugin, I'm not good and I've built other things on top of the Codepen.

Switching to this new method will be painful for me. And is, I've been trying today and it's breaking.

 

Perhaps it's not ideal but I'd like to keep the code I have and just manage to place the boxes correctly.

 

If ever anyone can help me on this aspect only, keeping the code as is without seamlessLoop, it would be awesome.

I'm under the impression that the solution isn't far, with an edit on the dispose() function.
I'm on GSAP 3.12.2

[GreenSock]

Yeah, that is an extremely inefficient way to handle that effect. It's doing a lot more work than is necessary. Quite wasteful. There are logic issues too, of course. Unfortunately we don't have the time to rewrite the code for you to improve performance or provide custom logic solutions for free in these forums (although anyone else is welcome to chime in). We do offer paid consulting services, so feel free to contact us if you'd like to explore that. 

 

Good luck with the project.

[asteroidtoastnetwork]

Hello @GreenSock thank you for your reply and for making things cooler since Flash

 

I've found a way to fix my code, images are now placed correctly:

    const dispose = (scroll) => {
      gsap.set($items, {
        x: (i) => {
          const sumWidth = Array.from($items).slice(0, i).reduce((acc, item) => acc + item.clientWidth, 0);
          return sumWidth + scroll;
        },
        modifiers: {
          x: (x, target) => {
            const currentIndex = Array.from($items).indexOf(target);
            const s = gsap.utils.wrap(-$items[currentIndex].clientWidth, wrapWidth - $items[currentIndex].clientWidth, parseInt(x));
            return `${s}px`;
          },
        },
      });
    };
    dispose(0)

 

I've checked a few console.logs and indeed this code seems do be running a bunch of stuff for nothing.
I didn't know about the consulting services, I might reach out then.

Thank you all