How to fix Draggable bounds crashing after using scrollToPluggin

[dmytro.kuz]

Hi guys. I'm using similar logic in my application and need to create a draggable slider with the ability to go to selected pages.
I made a simplified version of my app logic in this demo. Dragging works fine until I go to some page. After that, my bounds break and I can't drag the slider to the first pages, or sometimes scrolling to the left stops working altogether (in my app case).
Please help to solve this problem.
Also thanks for the good product and support.

See the Pen poqQWWJ by Dmytro-Kuz (@Dmytro-Kuz) on CodePen

[Rodrigo]

Hi,

 

I'm not seeing any issues with the Draggable instance in your codepen demo. Are you sure that the demo is actually reproducing the problem you're seeing?

 

The demo doesn't have any scroll whatsoever so the instances with the ScrollTo Plugin are doing nothing actually 🤷‍♂️

 

Happy Tweening!

[dmytro.kuz]

1 hour ago, Rodrigo said:

Hi,

 

I'm not seeing any issues with the Draggable instance in your codepen demo. Are you sure that the demo is actually reproducing the problem you're seeing?

 

The demo doesn't have any scroll whatsoever so the instances with the ScrollTo Plugin are doing nothing actually 🤷‍♂️

 

Happy Tweening!

Maybe I wasn't clear enough.  (video demo - https://drive.google.com/file/d/1ZnDO9o_fwEqNcgsame21g4M2xSOeaeud/view?usp=sharing)
To reproduce my problem, you need to drag the slider somewhere in the middle and click on some box (for example, 12). After that, try to drag again to the beginning. In this case, it will not be possible to drag to 1 box (or even to 2 and 3). Sometimes there is a behavior that after that actions dragging to the left is not available at all.
Regarding the ScrollTo Plugin, it is needed to move the slide that was clicked to the middle of the slider.

[Rodrigo]

Yeah I see the issue now. The problem is that you are mixing water and oil here (normally people say apples and oranges, but they're delicious together, so keep mixing them 😄).

 

You are moving the entire container with the cards using transform (translate on the X axis), but when you click an element you are actually scrolling the parent of that element, so naturally the element that is being dragged is offset now by that scroll amount. Better keep everything in the same side of the road, meaning just tween the X value of the cards container and you'll avoid all this hassle:

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

 

Hopefully this helps.

Happy Tweening!
 

[dmytro.kuz]

Rodrigo, wow, cool. Thank you for this advice. It helped me a lot.

I am almost at the goal of what I wanted. 

 

I am not yet experienced enough with gsap library, so don't be too strict with me 😅. Therefore, I hope for one more advice.

Last question. I really need to make it possible to scroll this slider using two-finger horizontall scroll on a trackpad and/or using horizontal mouse-wheel scroll.
But due to transformX, which is set in draggable, the behavior with such scrolling is incorrect. Is it also possible to combine such behavior with the existing one?

Example with overflow: scroll -  

See the Pen QWzozjE by Dmytro-Kuz (@Dmytro-Kuz) on CodePen

[Rodrigo]

Hi,

 

That basically gives you the same problem you had before. You are moving the entire element that is dragged. The Draggable instance remains unchanged and it's bounds are the same, is just the scroll of the parent is moving the entire container of the elements.

 

Also while I get why you want to use two finger horizontal scrolling on trackpads I think using Observer Plugin is a far better alternative. Keep in mind that trackpads dispatch wheel events that can be watched with Observer in order to update the X value of an element and then update the Draggable instance accordingly:

 

https://gsap.com/docs/v3/Plugins/Observer/

 

Here is a fork of my last codepen:

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

 

Is worth noticing that I'm using deltaY for this example, but you should use deltaX in order to check horizontal trackpad events.

 

Hopefully this helps.

Happy Tweening!