Jloafs Posted January 9 Share Posted January 9 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 Link to comment Share on other sites More sharing options...
Windpixel Posted January 9 Share Posted January 9 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 2 Link to comment Share on other sites More sharing options...
Windpixel Posted January 9 Share Posted January 9 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 2 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 9 Solution Share Posted January 9 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? 2 Link to comment Share on other sites More sharing options...
Jloafs Posted January 9 Author Share Posted January 9 Thanks so much 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now