Draggable slider dragging problem

[aydinvivik]

Hello, I want to use a slider made with Draggable Plugin from the examples in the forum with a few modifications. But I have a problem, if I drag the active slide halfway, it skips the next slide and moves to the next slide.

 

As you can see in the codepen example below, if I drag the slide number 1 halfway, it goes to 3 when it should go to 2.

 

 

 

See the Pen qBLzxVg by vivik (@vivik) on CodePen

[Rodrigo]

Hi,

 

Based on your demo I assume that you don't want to use the timer functionality and your setup doesn't use the Inertia plugin.

 

In that case this boils down to the logic that is being run when the draggable proxy is released:

let 	snapProgressDirectional = (value, direction) => {
  let snapped = snapProgress(value);
  if (direction < 0 && value - snapped > threshold) {
    return snapped + progressPerItem;
  } else if (direction > 0 && snapped - value > threshold) {
    return snapped - progressPerItem;
  }
  return snapped;
};

draggable = new Draggable(document.createElement("div"), { // use a proxy element
  trigger: ".slides-container",
  onPress() {
    gsap.killTweensOf(animation);
    this.startProgress = animation.progress();
  },
  onDrag() {
    let change = (draggable.startX - draggable.x) / totalWidth;
    animation.progress(draggable.startProgress + change);
  },
  onRelease() {
    gsap.to(animation, {
      progress: snapProgressDirectional(animation.progress(), (this.deltaX > 0 ? 1 : -1)),
      duration: slideDuration,
      overwrite: true
    })
  }
});

I created a fork of the original codepen from the GSAP collection:

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

 

Hopefully this helps.

Happy Tweening!

[aydinvivik]

Yes, that's great, thank you. But how do I loop it. I mean, can I switch back to slide 1 after slide 10?

[Rodrigo]

6 minutes ago, aydinvivik said:

Yes, that's great, thank you. But how do I loop it. I mean, can I switch back to slide 1 after slide 10?

Yeah that's a different beast and requires a bit more custom logic to create it. As you can see from this examples:

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

 

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

 

The logic for that is a bit different than the one in the previous example, so you'd have to mix parts of each setup in order to make that work. Unfortunately we don't have the time resources to build custom solutions for our users or solve complex logic issues, that's beyond the scope of what we do in these free forums.

 

We do offer paid consulting services, or you can ask for a freelancer quote here in the thread or maybe another user could chime in and provide some sort of particular solution for this.

 

Good luck with your project!

Happy Tweening!

[aydinvivik]

Thank you very much for your feedback.

[aydinvivik]

Hello again, how can I reset the animation responsively on this work? For example, you came by dragging it to slide 3 and after resizing the browser to smaller than 768px, I need to reset the animation and make it start from the beginning.

 

When I add the following code, the animation is reset, but then when I rewiden the browser, the animation and draggable do not work.

const isMobile = window.matchMedia("(max-width: 768px)");

function resize() {
  //...

  if (isMobile.matches) {
    animation.progress(0).kill();
    draggable.startProgress = animation.progress();
  }
}

 

Codepen demo:

 

See the Pen YzdmXwd by vivik (@vivik) on CodePen

[Rodrigo]

Hi,

 

The problem is here:

function resize() {
  slideWidth = slides[0].offsetWidth;
  totalWidth = slideWidth * numSlides;

  if (isMobile.matches) {
    animation.progress(0).kill(); // PROBLEM!!
    draggable.startProgress = animation.progress();
  }
}

When you pass the breakpoint you setup in your matchmedia instance, you are actually killing the animation. When you kill a GSAP instance, that is gone, kaput, animation-no-more and ready for garbage collection. So while the Draggable instance is actually working there is no animation to update through the Draggable instance. Removing the kill() method actually works:

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

 

Finally you might want to check GSAP MatchMedia:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Hopefully this helps.

Happy Tweening!

[aydinvivik]

Thank you @Rodrigo now I understand, only the animation is resetting but not back to the beginning, can I make it happen?

[Rodrigo]

Just add the same code for when the browser passes the other breakpoint going up (screensize-wise of course).

 

You created another thread for this where @mvaneijgen already suggested using GSAP MatchMedia. You should really check it out in order to see how it works.

 

Happy Tweening!

[aydinvivik]

Thank you for your support

[aydinvivik]

@Rodrigo I have taken a lot of your time on this subject but I am in the process of learning, I have one last problem, I can't get the activeIndex correctly.

 

See the Pen YzdmXwd by vivik (@vivik) on CodePen

[aydinvivik]

I think I did but I'm not sure if I did it right, can you confirm?

 

First I averaged the total number of slides with progress after the animation was completed.

onComplete: function () {
  setActiveSlide(Math.floor(animation.progress() * numSlides));
}

After that there was a problem that the last slide was taking the total slide value, I solved this with -1 if the index is equal to the total slide value.

function setActiveSlide(index) {
  if (currentIndex !== index) {
    currentIndex = index === numSlides ? index - 1 : index;
    activeSlideInfo.innerText = currentIndex;
  }
}

This is how it works now, but I'm not sure if my method is correct.

 

See the Pen YzdmXwd by vivik (@vivik) on CodePen

[Rodrigo]

Hi,

 

Yep everything looks right to me, good job! 🙌

 

Probably there could be other ways to do it, but most likely would be variations of what you have in place already.

 

Happy Tweening!