Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

Recommended Posts

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

Link to comment
Share on other sites

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));


  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.