Draggable slider problem

[VecchiaPrugna]

I was trying to figure out a way to create a slider that overflows on the right, a pretty standard design you see on lots of website.

https://codepen.io/ykvdnykw-the-bold/pen/QWoezv

 

I want to achieve the same exact thing with GSAP Draggable plugin, at the bottom you can see another codepen for my attempt.

 

I tried setting bounds: document.querySelector(".slider-wrapper"), but the result is that it is completely stucked.

Maybe it's a simple problem, but I can't come up with a solution.
You could tell me to just use the SwiperJS solution I come up with, but I really want to achieve its GSAP equivalent using Draggable plugin.

Please guys, help me.

 

What I'd like to achieve: (I did this using SwiperJS)

See the Pen XWGvOmm by ykvdnykw-the-bold (@ykvdnykw-the-bold) on CodePen

See the Pen QWoezvm by ykvdnykw-the-bold (@ykvdnykw-the-bold) on CodePen

[Rodrigo]

Hi,

 

Just a matter of making the right calculations. Keep in mind that when dragging to the left the numbers are negative, so the max number in terms of the bounds is zero. For the minimum number is the natura width of the element minus the scroll width:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth

 

Here is a fork of your demo (thanks for creating such a simple demo, we love those around here 🥳)

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

 

Hopefully this helps.

Happy Tweening!

[VecchiaPrugna]

5 hours ago, Rodrigo said:

Hi,

 

Just a matter of making the right calculations. Keep in mind that when dragging to the left the numbers are negative, so the max number in terms of the bounds is zero. For the minimum number is the natura width of the element minus the scroll width:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth

 

Here is a fork of your demo (thanks for creating such a simple demo, we love those around here 🥳)

 

 

 

Hopefully this helps.

Happy Tweening!

It sured help! Thank you very much!
One thing I noticed is that I should update it on window resize. Any idea on how to do that?
Plus, if you have any tips on how to make it better overall I'll be so grateful

[Rodrigo]

7 minutes ago, VecchiaPrugna said:

Any idea on how to do that?

Just update the Draggable instance after the resize event and apply the new bounds that depend on the new size of the element:

https://gsap.com/docs/v3/Plugins/Draggable/update()

https://gsap.com/docs/v3/Plugins/Draggable/applyBounds()

 

9 minutes ago, VecchiaPrugna said:

if you have any tips on how to make it better overall I'll be so grateful

Make what exactly better? Sure enough the styling is not the best but that is something beyond the scope of these forums. Otherwise the code works the way it should, at least as far as I can see it.

 

Happy Tweening!

[RobertRobles]

On 2/27/2024 at 7:38 PM, Rodrigo said:

Hi,

 

Just a matter of making the right calculations. Keep in mind that when dragging to the left the numbers are negative, so the max number in terms of the bounds is zero. For the minimum number is the natura width of the element minus the scroll width:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth

 

Here is a fork of your demo (thanks for creating such a simple demo, we love those around here 🥳)

 

 

 

Hopefully this helps.
Happy Tweening!
 

I appreciate you sir for helping me out as well, you made my day.

Edit: It resolves my issue.