How to connect slider controls to draggable boundaries

[nicolaseielll]

Hello, I have this draggable feature on my slider but I also want previous and next controls to it so I added basic gsap.to() to the buttons which translates the slider to wanted direction but it goes over the boundaries I have set in the Draggable config object. My question: is there a way to connect the prev/next controls to the Draggable boundaries so that the slider doesn't go past them and if not is there a way to set the boundaries some other way?

 

Here's my draggable object:

var draggable = new Draggable('#slides-inner', {
  trigger: '.slides-container',
  type:"x",
  bounds: {
    minX:0, 
    maxX: -wrapWidth + windowWidth + 20
  },
  inertia: true,
});

And here's the prev/next animation:

function animateSlides(direction) {
  var x = direction * slideWidth;
  gsap.to('#slides-inner', {
    x: x,
    ease: 'Power3.easeInOut'
  })
}

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[nicolaseielll]

Hello,

 

I solved this by using getBoundingClientRect. First I get the sliderPosition and check how far it is from the max or min value (depends are you clicking previous or next) then if the slider is more than X away from the min or max value it translates X amount to the left or right but if it is closer than  X it translates the space left between the slider and max or min value so the slider never gets past the boundaries.