Nested draggables with different axis

[mikkmartin 0 Likes (Newbie)]

Hello,

I've been fiddling with the greensock platform and plugins for a while and I'm impressed! Both - with the capabilities and the performance.

 

I'm building a prototype of a fullscreen 2-way scroll system. A full window master - that scrolls and snaps horizontally. And with vertically scrolling elements inside. The goal is to get native scrolling full pages swipable up'n'down and side-to-side with snapping.

 

Here's what i need help with:

 

See the Pen mvDfz by skorpa (@skorpa) on CodePen

 

Worked so far as intended - The vertical scroll cancels the parent horizontal scroll on onDragStart by passing endDrag to it, and vice versa, but only works with a mouse. With touch devices you can only control horizontal scroll. disable & enable doesent handle with touch eather and can leave elements frozen offset mid animation. Is there a way to implement this? Compromise is to use non native x, y scrolling and use keyboard or clickable buttons to move left-right I'm guessing..

 

And on a side note: Any good ideas how to implement horizontal snapping with native mouse / trackpad scrolling? Thinking - animate to the nearest snap point after a scroll event is fired

 

Thanks in advance!

 

Mikk