Issues with draggable and inertia

[Jloafs]

Hi guys,

I'm trying to create a netflix type horizontal list of videos that can be scrolled by dragging. I want the dragging to have a softness to it so assumed the inertiaPlugin would be the way to go. Its my first time using either of these so am finding it difficult to trouble shoot.

I set up a rough pen to illustrate. Can anyone shed any light on how to resolve this? Also ideally dont' want the contents within the scrollable window to be scrolled beyond the end of the content - ie don't want the contents to be scrolled leaving a big gap after the last element.

 

Also the elements inside will be videos so need to be clickable - I notice that the drag hijaks the cursor. Is there a workaround for that?

See the Pen eYXzBpo by jloafs-DM (@jloafs-DM) on CodePen

[Windpixel]

How about something like this?

This has the basic functionality sorted (See my later post for another pen with some videos added)
 

See the Pen xxBOgpp by windpixel (@windpixel) on CodePen

 

 

 

 

 

[Windpixel]

You can make the default cursor a pointer as per code below, but having a look at my demo below. You can play videos and you can also drag.

Add "cursor:pointer".

Lots more tweaks and options can be made. Check out the docs here for more info: https://gsap.com/docs/v3/Plugins/Draggable/

Draggable.create(".scroller", {
  type: "x",
  bounds: ".tutorial-video-scroller-group",
  inertia: true,
  cursor: "pointer"
});

See the Pen jOJrypq by windpixel (@windpixel) on CodePen

[GreenSock]

Yep, and just to be clear, the problem with your original attempt was that your draggable element itself was the same width as the container that you used for bounds. So there was literally no room to drag it in either direction. @Windpixel made width: fit-content so that it stretches to be the width of its content, thus there's room to drag.

 

It was just CSS/layout issues, not really a Draggable thing. 

 

Thanks for chiming in @Windpixel 🙌

 

Does that clear things up? 

[Jloafs]

Thanks so much