Infinite Carousel – Wrapping Issue

[oscarsidebo]

Hi,

 

I'm struggling to understand why my carousel here isn't wrapper back to the start (x=0) when using modifiers?

 

Am using flex-box to initially position the element, might that be why?

 

https://codesandbox.io/s/stupefied-microservice-s1unz?file=/src/App.js

[GreenSock]

Nah, it's a logic issue in your code. GSAP is doing exactly what you're asking, but each of those elements is a different distance from the x value where it should wrap so you need to do individual calculations for each one. I assume you meant to do something more like this: 

 

const elements = gsap.utils.toArray(ref.current.querySelectorAll(".flexItem"));
const containerBounds = ref.current.getBoundingClientRect();
const widest = Math.max(...elements.map(el => el.offsetWidth));

elements.forEach(el => {
  const bounds = el.getBoundingClientRect();
  gsap.to(el, {
    duration: 10,
    ease: "none",
    repeat: -1,
    x: -containerBounds.width - widest,
    modifiers: {
      x: gsap.utils.unitize(gsap.utils.wrap(containerBounds.left - widest - bounds.left, containerBounds.right - bounds.left), "px")
    }
  });
});

Also, you don't need to import ModifiersPlugin - that's baked into the core.

[oscarsidebo]

That's it, thank you!