Jump to content
Search Community

GSAP draggable horizontal gallery

knalle test
Moderator Tag

Recommended Posts

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

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

  • Like 1
Link to comment
Share on other sites

@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

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:

divi-horizontal-swipe-content-example-1-

 

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

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:

 

  • Like 1
Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...