draggable Animation not snapping to labels for draggable

[vamsi_k]

Hello,
I tried to recreate material ui 3 carousel with GSAP.

When we swipe on the carousel, width of next image in the line should increase and width of current image should decrease. I added labels in the timeline where one of the images are in expanded positions.

When the timeline is linked to a ScrollTrigger, Snap to labels is working fine. And it is not working if timeline is linked to draggable.

I tried

snap: {
  snapTo: "labelsDirectional",
    duration: 0.01,
      ease: "none",
},

and 

snap: "labelsDirectional",

Is it not supported? Please help me with anything Im doing wrong.
Thanks

See the Pen BaGBXQv by boredPheonix (@boredPheonix) on CodePen

 

See the Pen xxQwROg by boredPheonix (@boredPheonix) on CodePen

Edited June 13, 2023 by vamsi_k
Edited description with proper explaination

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "please evaluate all my code and tell me what I could do better" requests. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you've got a specific question about something GSAP-related, feel free to post that and make sure you isolate the issue in a CodePen and clearly describe exactly how to recreate the problem. It wasn't immediately clear, for example, what you expected on the Draggable version that isn't working the way you expected. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

[vamsi_k]

Sorry for bad explaination. Edited description with proper explaination.

 

[vamsi_k]

Fixed it by changing logic on dragEnd and removed snap

[Rodrigo]

Hi,

 

Is great to hear that you got it working!

 

Just a few clarifications:

1. Snap is available in Draggable when combined with the Inertia Plugin. Out of the box Draggable only has live snap, which works as you drag, that's why you had to create some custom logic in your drag end callback to make it work.
2. The labels directional snapping is only available in ScrollTrigger for obvious reasons. In Draggable you don't pass a GSAP Tween or Timeline, just the type of Draggable (x, y, rotation) and the bounds and/or limits, while in ScrollTrigger you can target a timeline which can have labels. You can of course get the timeline labels and get the progress of each label and use onDragEnd logic to tween the progress of the timeline to that particular position of the timeline. Or your current approach of getting the next and previous labels.
3. Every Draggable instance has a startX property and a deltaX property that are updated every time a drag event starts, so you don't have to do this:

   function updateStart() {
     dragStartX = this.x
   }
   
   function updateEnd() {
     const diffX = this.x - dragStartX
   }

Hopefully this helps.

Happy Tweening!

[vamsi_k]

Thanks @Rodrigo. Understood