Draggable carousel works improperly if I set repeat: -1

[PosteProgrammer]

Draggable carousel works improperly if I set repeat: -1, when it finishes a lap and I want to drag it, it seems to go crazy.

just add:

const loop = horizontalLoop(boxes, {
  paused: false,
  draggable: true,
  repeat: true
});

how i can fix it?

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

[Rodrigo]

Hi,

 

I don't see anything unusual in that demo and neither on this:

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

 

Can you please be super specific about the steps to reproduce the issue? Also tell us browser and OS where you're seeing this?

 

Happy Tweening!

[PosteProgrammer]

@Rodrigo I just noticed that the codepen you sent me does not have this, by the way my OS is windows 11 and I am opening it from opera gx

[Rodrigo]

There is no issue if Inertia Plugin is not there, you can remove the intertia: true config in the loop function and the check for the Inertia Plugin in order to not have that warning:

// Remove this line
typeof(InertiaPlugin) === "undefined" && console.warn("InertiaPlugin required for momentum-based scrolling and snapping. https://greensock.com/club");

draggable = Draggable.create(proxy, {
  trigger: items[0].parentNode,
  type: "x",
  onPressInit() {
    let x = this.x;
    gsap.killTweensOf(tl);
    startProgress = tl.progress();
    refresh();
    ratio = 1 / totalWidth;
    initChangeX = (startProgress / -ratio) - x;
    gsap.set(proxy, {x: startProgress / -ratio});
  },
  onDrag: align,
  onThrowUpdate: align,
  overshootTolerance: 0,
  // REMOVE THIS LINE
  inertia: true,
  // REMOVE THE SNAP CALLBACK AS WELL
  snap(value) {
    //note: if the user presses and releases in the middle of a throw, due to the sudden correction of proxy.x in the onPressInit(), the velocity could be very large, throwing off the snap. So sense that condition and adjust for it. We also need to set overshootTolerance to 0 to prevent the inertia from causing it to shoot past and come back
    if (Math.abs(startProgress / -ratio - this.x) < 10) {
      return lastSnap + initChangeX
    }
    let time = -(value * ratio) * tl.duration(),
        wrappedTime = timeWrap(time),
        snapTime = times[getClosest(times, wrappedTime, tl.duration())],
        dif = snapTime - wrappedTime;
    Math.abs(dif) > tl.duration() / 2 && (dif += dif < 0 ? tl.duration() : -tl.duration());
    lastSnap = (time + dif) / tl.duration() / -ratio;
    return lastSnap;
  },
  onRelease() {
    syncIndex();
    draggable.isThrowing && (indexIsDirty = true);
  },
  onThrowComplete: syncIndex
})[0];

That should work as expected with Draggable but without the Inertia Plugin.

 

Hopefully this helps.

Happy Tweening!