Horizontal scroll with vertical scroll panel

[weti]

Hey, so I've been searching through the forum but I kinda can't find a solid solution for the problem.

So I want a horizontal scroll which is working like wanted. But the content in the panels is dynamic (there are longer texts or more images). This works for desktop devices but not for mobile. So my design team was thinking about something like a staircase animation where I scroll horizontally to the right and then scroll down until I reach the end of the panel and then continue scrolling horizontal.

In my codepen I tried to show the problem while simulating the mobile device. The content is overflowing so it gets hidden. But I want it to be scrollable. I've tried it with normal CSS overflow scrolling but this will be a pain for the user. Can anyone of you point me in the right direction? I read about pausing the ScrollTrigger while in the panel to let the user vertical scroll, but couldn't find a solution. (And yes, I also don't like scrolljacking, but customers...)

Thanks!

See the Pen GRbGjqG by weti09 (@weti09) on CodePen.

[mvaneijgen]

I would make it part of the animation, eg is there content to scroll add and animation that moves the items on the y-axis, same as you do on the x-axis. 

 

Keep in mind that everything here is just hard coded you probably want to get this dynamically and based on if the content is larger then the height of the container add an animation to scroll that amount - the height of the container. Hope it helps and happy tweening! 

 

See the Pen abgKmeq?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[weti]

So I tried my best with the example you gave me and came up with this from another example. While it somehow seems to work in the CodePen, on my device, it doesn't. But I'm working on a fix, so thanks for the suggestion.

 

See the Pen gONKgpg by weti09 (@weti09) on CodePen.