# Wrapping draggable carousal while dragging

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax.

## Recommended Posts

Hi,

At the moment I am working on a infinite carousal which can be dragged as well. I was able to add draggable functionality to Blake's pen but how can I duplicate modifier's wrapping behaviour for draggable? So the entire carousal is in xPercent and draggable updates x while dragging.

Also, Can someone explain calculation done here?

```    function wrapPartial(min, max){
var r = max - min;

return function(value){
var v = value - min;
return ((r + v % r) % r) + min;
}
}```

I don't understand what it does exactly and where does 'value' come from.

Thanks.

See the Pen veLaxP by Sahil89 (@Sahil89) on CodePen

##### Share on other sites

Nope. My brain does not compute that.

I have tried and failed. Sorry for taking this long to reply. I was going over the code and trying to work it out myself. Someone else will have to rescue you.

As for the snippet of code, let the one who wrote it explain - I kind of get what he's doing but not sure that I would explain it correctly.

• 2
##### Share on other sites

Well here's the post I made about that function. Understanding the math might require you to play around with different parts of the code by hand to see what they do.

The function looks weird because I'm returning another function. I did that just so I wouldn't have to pass in the min and max values on every call. It's kind of like using bind on a function to pass in parameters automatically.

```// Returns a new function that will pass in -100 and 500 as the first paramaters on every call
var wrap = wrapFn.bind(null, -100, 500);

wrap(800); // => 200

// Which is the same as doing this
wrapFn(-100, 500, 800); // => 200

function wrapFn(min, max, value){
var r = max - min;
var v = value - min;
return ((r + v % r) % r) + min;
}```

• 3
##### Share on other sites

There. Better when someone smarter gets involved.

I'll be like that when I grow up.

• 2
##### Share on other sites

If you're curious, the technical term for that type of function is called partial application, and it works by using closures.

I'll look at your demo later today and see what I can come up with.

• 1
##### Share on other sites

Thanks Blake, I will go through it and see if I can modify it to wrap while dragging.

##### Share on other sites

I would set it up just like the original

See the Pen ZOgGXB by osublake (@osublake) on CodePen

, but use xPercent instead of x for the animation.

```var animation = TweenMax.to(slides, 1, {
xPercent: "+=" + (slides.length * 100),
...
});```

In the updateProgress function, divide by the actual width of all the slides. So that means you will have to recalculate that value on every resize.

To animate a slide change, you could something like this.

```var step = 1 / slides.length;

var duration = animation.duration();

// Animate to the 3rd slide
animation.tweenTo(2 * step * duration)

// Animate to the 4th slide
animation.tweenTo(3 * step * duration)

// Animate to the 5th slide
animation.tweenTo(4 * step * duration)```

You may need to do some rounding like the animateSlides function in that auto-slider

See the Pen brZLoP by osublake (@osublake) on CodePen

.

To round to a decimal, use the reciprocal.

```var step = 1 / slides.length;
var place = 1 / step;

var nextSlideProgress = (Math.round(animation.progress() / place) * place) + step;

animation.tweenTo(nextSlideProgress * duration)```

Something along those lines. I'm doing all that in my head, so I can't guarantee everything is correct.

• 1
##### Share on other sites

Hi Blake,

Thanks for helping me out. I went ahead and updated my demo further, I was able to wrap elements.

I didn't use magical methods like you do, I basically calculated this.x plus the distance each element traveled in either direction and updated their xPercent to lowest or highest. It works as I would like, I will just clean up my code and update the demo.

##### Share on other sites

I updated my demo, now it works perfectly with one issue of some slides flashing briefly when dragged too far. If that can be resolved then it will be perfect, still I am satisfied with result.

Please let me know if I can improve it any way.

Thanks.

See the Pen veLaxP by Sahil89 (@Sahil89) on CodePen

##### Share on other sites

Probably because you're changing x and xPercent.

Just use my magic methods... and I can assure you that there's no magic involved. Just a bunch of ratios. That's the secret to figuring out complicated animations.

And I'm still going to make another version later tonight.

• 3
##### Share on other sites

I will see if I can adapt it.

7 minutes ago, OSUblake said:

And I'm still going to make another version later tonight.

When do you even sleep? You have been interacting with me all day as if you are living in India.

##### Share on other sites

Just now, Sahil said:

When do you even sleep? You have been interacting with me all day as if you are living in India.

Hehe. That's why I said I later tonight. I need get some sleep.

##### Share on other sites

Hi Blake,

Finally I managed to do it. Answer was right in front of me, it is combination of both of your pens. This time my solution uses your magic methods but may not be as elegant as your coding methods. So on update I just updated xPercent and on release the slides animate based on modulus of percentage.

You maybe wondering why I am avoiding using your original demo, well when I converted it into responsive slider it worked but on resize it would stay stuck based on boxWidth of previous window size and that method only uses easeNone so I was avoiding it in case I decide to use any other ease.

Let me know what do you think. And thanks a lot for your help.

See the Pen veLaxP?editors=1111 by Sahil89 (@Sahil89) on CodePen