Help on Draggable Slider to Snap on the next/previous slide

[mark.tingson 3 Likes (Newbie)]

Hi guys,

I'm trying replicate this carousel effect on one of my projects. 

 

 

My concern is that, whenever I tried to drag hard and fast, the carousel doesn't snap to the next slide and it animates all the way. I thought I need to change something on the snap function and apply the gsap.utils.wrap method but I can't figure it out. Anyone know what's the best approach to make it snap just on the next and previous slide?

 

Thank you so much!

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

[OSUblake 18,400 Likes (Superhero)]

Hi Mark,

 

Have you checked out helper function for that?

 

https://greensock.com/docs/v3/HelperFunctions#loop

 

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

 

[GreenSock 16,965 Likes (Superhero)]

I agree with Blake that it might help to consider that helper function, but if you just want to limit the snapping you could do something like this: 

// OLD
snap: {
  x: snapX
}

// NEW
snap: {     
  x: (value) => {
    return snapX(gsap.utils.clamp(draggable.x - slideWidth / 2, draggable.x + slideWidth / 2, value));
  }
}

 

[mark.tingson 3 Likes (Newbie)]

Thanks guys! I'll take a look at the helper functions and Jack's solution.. Really appreciate everything! ❤️