knalle Posted November 16, 2020 Share Posted November 16, 2020 I can't get snap working. As you can see, I am just testing with some numbers to start with. Eventually I will have to loop through the items (also onResize) and adjust the snap array, so that it snaps to the left side of the bounds. Perhaps I am just missing something simple? I have seen some CodePens with a lot of code, proxies, and absolute positioned items - still, this should be a simple(r) task - especially when a everything else GSAP seems so straight forward.. (and that's praising GSAP - not complaining ) See the Pen gOMEzQP by knalle (@knalle) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 16, 2020 Share Posted November 16, 2020 Hey knalle. The main issue is that your bounds are not letting your Draggable be moved very much. You probably want bounds to be based on the content instead. It also sounds like a functional value for your snap would make more sense. I might set it up this way: See the Pen JjKzZqK?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
knalle Posted November 17, 2020 Author Share Posted November 17, 2020 @ZachSaucier that is exactly the information I needed. I had misunderstood the purpose of bounds. Makes sense now. Also the flex-inline is worth noticing in your updated CodePen, so it returns the right width. Is there any way to add a scroll bar - perhaps a one made with Draggable as well, since a native wont work right with the "edgeResistance" and I would require "scrollLeft" as type, right? And I understand that "x" is to prefer for smoother performance. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 17, 2020 Share Posted November 17, 2020 6 hours ago, knalle said: Is there any way to add a scroll bar Perhaps these thread can point you in the right direction. Link to comment Share on other sites More sharing options...
knalle Posted November 18, 2020 Author Share Posted November 18, 2020 Thanks @ZachSaucier I was thinking more like a a horizontal custom scrollbar, that doubles as and indicator of progress and thart this is a horizontal scroll area. Like: Also, another thing I need: arrow naviagtion. Can I tween the Draggable to the next snap point? So I just compare the current endX and go tho next og previous snap x when next/prev button is pressed. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 18, 2020 Share Posted November 18, 2020 5 hours ago, knalle said: I was thinking more like a a horizontal custom scrollbar, that doubles as and indicator of progress and thart this is a horizontal scroll area. I think the core approach is the same. 5 hours ago, knalle said: Can I tween the Draggable to the next snap point? You can make those calculations yourself. Here's a similar thread: 1 Link to comment Share on other sites More sharing options...
knalle Posted November 18, 2020 Author Share Posted November 18, 2020 Thanks @ZachSaucier Regarding next/prev question, I noticed the post was on ScrollTrigger and not Draggable. I guess the approach is similar. But I could just tween the Draggable target - and then update() the Draggable, right? Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 18, 2020 Share Posted November 18, 2020 I was assuming that you'd add ScrollTrigger in order to allow people to scroll the horizontal draggable section like the threads I shared before talk about If you really don't want to allow people to scroll then you just need to affect the x position of the container with the button clicks. Draggable gets whatever the current value is when the drag starts so you don't have to do any work to keep it synced. 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