scroll trigger when dragging not working on mobile devices and weird transition from horizontal to vertical scrolling

[nami 3 Likes (Newbie)]

dear greensock,

I am making this post in the hopes that someone can help me with this issue. seems absurd that i am making a post since I have been seeing this effect everywhere, but I cant' seem to make it work on my code. 

Im tried to reproduce the error inside a codepen I hope that helps

So basically there are two things that i am missing:

One: once the horizontal scroll is over, I want it to continue to vertically scroll through the rest ( the third panel, which is exactly like the first panel). What happens now is that even though the horizontal wrapper is pinned, it continues to scroll through the third panel and it kind of disappears

Two: The horizontal scrolling doesn't seem to be working on a mobile device.

 

Here is a link of a very good example of what I am trying to achieve: https://garoaskincare.com/ 

 

It is my first go at gsap so bare with me

See the Pen yLgvWQL by imane-ben (@imane-ben) on CodePen

[akapowl 4,406 Likes (Superhero)]

 

Welcome to the forums @nami

 

I guess you'd just want to pin your panel2 instead of your horizontal-wrapper - which does appear to also work properly on mobile

 

See the Pen 40ba999340e08b5412fe45ab8bac91d6 by akapowl (@akapowl) on CodePen

 

 

[nami 3 Likes (Newbie)]

3 hours ago, akapowl said:

 

Welcome to the forums @nami

 

I guess you'd just want to pin your panel2 instead of your horizontal-wrapper - which does appear to also work properly on mobile

 

 

 

 

 

Thanks! You solved problem 1 for me, I guess the proxy class should be replaced by .panel2 as well?
While it seems to be working fine on my laptop, when i check it on my phone it doesn't scroll horizontally. This happens when i use the code outside the code pen it creates this overflow-x even though i set the overflow to be hidden on the body.

[akapowl 4,406 Likes (Superhero)]

56 minutes ago, nami said:

I guess the proxy class should be replaced by .panel2 as well?

 

Supposedly it should be an element with the class of proxy in your HTML - I added one in my demo and it seems to work.

 

56 minutes ago, nami said:

While it seems to be working fine on my laptop, when i check it on my phone it doesn't scroll horizontally. This happens when i use the code outside the code pen it creates this overflow-x even though i set the overflow to be hidden on the body.

 

I see that now.

Have you tried setting overflow-x to your .horizontal-wrapper - or probably better to your .panel2 to not cut off the content? 

That seems to do the trick for me. No more wonky layout on mobile (outside of the codepen frame in debug mode).

 

See the Pen f8a9d3d63e0c70e0b1a4c35293202e0e by akapowl (@akapowl) on CodePen

 

[nami 3 Likes (Newbie)]

56 minutes ago, akapowl said:

 

Supposedly it should be an element with the class of proxy in your HTML - I added one in my demo and it seems to work.

 

 

I see that now.

Have you tried setting overflow-x to your .horizontal-wrapper - or probably better to your .panel2 to not cut off the content? 

That seems to do the trick for me. No more wonky layout on mobile (outside of the codepen frame in debug mode).

 

 

 

 

That does it! i thought the setting the pinSpacer to false would do the job, but this will do just fine! Thank your for the help