GSAP Draggable, can't drag from gaps

[VecchiaPrugna]

Let me explain.
I have created a slider that overflows on the right side of the screen, a design choice you often see in lots of websites.

What I want you to notice is that you can drag by grabbing (on desktop device) or swiping (on touch device) starting the motion from within the slide but also within the gaps. However, if you try dragging from within the gaps of the last slides (the ones that initially overflow) it does not work.

I hope that was clear, english is not my main language.

Any idea how to solve this?

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

[mvaneijgen]

It would work if your .slider element was as big as it was. I don't have time to dive into it right now, but with some CSS you would be able to make the .slider element take up all the space it needs and not only in the .slider-wrapper.

 

To recap you can drag everything that is orange in the element below, because this is the width of your .slider element and instead the orange should be behind all the pink elements, not just what is inside the .slider-wrapper. Hope it helps and happy tweening! 

 

See the Pen MWRopoj by mvaneijgen (@mvaneijgen) on CodePen

[VecchiaPrugna]

@mvaneijgen Thank you! That's what I tought but I have absolutely no idea how to make the .slider as wide as it should be. Is it possibile using only CSS?
If you have any hints I'll appreciate it big time

[Rodrigo]

Hi,

 

Just with CSS I'm not aware, but I'm far from being a CSS wiki so take my word with a giant grain of salt since most likely is possible, I'm just ignorant on the fact. But with GSAP is super easy though:

gsap.set(slider, {
  width: slider.scrollWidth,
});

Here is a demo:

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

 

Hopefully this helps.

Happy Tweening!