Creating a 3D Carousel with dragging and snapping

[PixeledCode]

So I am creating a 3D carousel which goes to next slide on button click/mouse drag/arrow keys. I first tried to merge carousel libraries like splide and embla but couldnt get them to work properly. Now I have moved to custom solution which kind of works but lacks some features.
https://svelte.dev/repl/e33b47c769bf49278094746a3af3c547?version=4.2.8

Is it possible to add dragging and snapping to axis using gsap? Unless user drags the slide till a certain number, it wont go to the next one and snap back to it's position, just like how normal carousel works.

[mvaneijgen]

Sounds like you're looking for the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ with the dragMinimum property. So instead of Draggle, which is made to drag something use the Observer plugin and watch for the drag event and do something based on that. Hope it helps and happy tweening! 

 

Quote

dragMinimum

Number - the minimum distance (in pixels) necessary to be considered "dragging". This can help prevent tiny motions especially on touch devices from indicating intent. For example, just pressing down with a finger on a phone may register slight movement of a few pixels even though the user thinks their finger was stationary. dragMinimum only applies to the initial movement after pressing down, but continued dragging thereafter would only be subject to "tolerance" throttling.

 

[PixeledCode]

3 hours ago, mvaneijgen said:

Sounds like you're looking for the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ with the dragMinimum property. So instead of Draggle, which is made to drag something use the Observer plugin and watch for the drag event and do something based on that. Hope it helps and happy tweening! 

 

 

Thanks for replying. This sets in the right direction I think. I used Observer and dragEnd to remove a lot of code and rely on GSAP which was good. Although I am still not sure how to add the final touch of a carousel. I think it will need toLeft/toRight or dragStart and then checking how many pixels are moved. Ideally it should be more than 50% of the card width to trigger the move to next slide.
and then there is also the snapping back to original position if drag is not eligible for move.

[Rodrigo]

Hi,

 

I would keep using Draggable if I was you, you can easily tap into the onDrag end callback and a proxy to create the animation:

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

 

Hopefully this helps.

Happy Tweening!