Horizontal scrolling of photo galleries, error with mobile

[gabpe77]

Good morning everyone. this is the first time I am using GSPA, I used to use scrollMagic, but on this apprlication, it did not prove to be up to scratch. I re-developed using GSAP the project, but I still have a problem (I solved one, but have another).

I have prepared this example, however, you do not generate the error in this simulation, but if you try it with a mobile device or with the simulation from the browser of a mobile device, you can see the problem. Here is the codePen:

 

In practice, if you resize the window or if you start from a small window size e.g. 375 x 812, the galleries do not pin to the screen (you can see an attached image), but do so far down the screen. I have tried many different variations, but I cannot find an error.

 

I noticed that by adding overflow hidden to the .imagesGallery class, on mobile it starts to work, but the gallery contents are cut off.

 

Does anyone have any suggestions for me? Thank you in advance.

Gabriele

 

 

See the Pen qBzWrmJ by gabpe (@gabpe) on CodePen

[Cassie]

Hi there!

 

I can't replicate this, but I made some small changes that might have helped? Let me know if this is any better.

 

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

use this link to test on your mobile browser (It's not in an iframe so more accurate for testing) https://cdpn.io/pen/debug/dyBbWqp

 

 

 

 

[gabpe77]

3 hours ago, Cassie said:

Hi there!

 

I can't replicate this, but I made some small changes that might have helped? Let me know if this is any better.

 

 

 

use this link to test on your mobile browser (It's not in an iframe so more accurate for testing) https://cdpn.io/pen/debug/dyBbWqp

 

I @Cassie, thank you for your reply and for your help!

 

With your solution, the problem is that the images do not take up the whole screen height in mobile devices.

 

Meanwhile, I went ahead and modified the element I use as a reference for the .to() method:

 

gsap.to(document.querySelector('#gallery-' + gallery + ' .imagesGallery-body'), { ... }

 

This way, by imposing .imagesGallery with hidden overflow, the scroll works correctly even on mobile devices.

 

I tried invalidateOnRefresh: true, and it seems to me that in case you rotate the mobile device, the fit is more accurate.

 

I also added, as you suggested start: 'top top'.

 

I increased scrub: 0.9 a little bit, the animation is now faster and more usable.

 

I am finishing the latest version, as soon as it is finished, I will post it here.

 

Thanks again for the help!