Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nami

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

Go to solution Solved by akapowl,

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution
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

 

  • Like 2
Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×