Problem With PhoneTBC on mobile device

[Atul Singh]

The scrolling effect works well on desktop devices, but it's not functioning correctly on mobile devices. This means that the images on the left side are not appearing one by one as they should when scrolling, and the starting and ending points of the scroll are also incorrect.

Additionally, sometimes on desktop devices, it seems like the images initially appear in the upper section, especially when the "Phone-TBC" section has "overflow: hidden" applied. In CodePen, the images are not showing outside the designated area, but I'm facing this issue on my website. Can someone please help me with this problem?

https://splashdigital-4429477.hs-sites.com/home

 

See the Pen dywryVe by atulkumarsingh (@atulkumarsingh) on CodePen

[mvaneijgen]

You said you don't have the issue in Codepen? (I indeed see nothing in your pen). My advies would be start disabling big chunks of your website code until the issue does not persist anymore, then slowly go back in and enable things again until you've found the culprit. 

[Atul Singh]

7 hours ago, mvaneijgen said:

You said you don't have the issue in Codepen? (I indeed see nothing in your pen). My advies would be start disabling big chunks of your website code until the issue does not persist anymore, then slowly go back in and enable things again until you've found the culprit. 

@mvaneijgen

 

Okay, thanks. There is a scrolling issue on mobile devices on both the website and CodePen. This means that the starting and ending points are not functioning properly on mobile devices.

[Rodrigo]

Hi,

 

You mention that there is some sort of responsive issue in your codepen, but the demo is not really responsive:

Also you had markers set to false. When debugging some issue with ScrollTrigger, especially that involves start and end points, always use markers: true.

 

Finally I see that you had GSAP MatchMedia in your demo but commented out 🤷‍♂️

 

Please be more specific about the problem you have and make sure the demo you provide clearly illustrates that problem.

 

Happy Tweening!

[Atul Singh]

10 hours ago, Rodrigo said:

Hi,

 

You mention that there is some sort of responsive issue in your codepen, but the demo is not really responsive:

Also you had markers set to false. When debugging some issue with ScrollTrigger, especially that involves start and end points, always use markers: true.

 

Finally I see that you had GSAP MatchMedia in your demo but commented out 🤷‍♂️

 

Please be more specific about the problem you have and make sure the demo you provide clearly illustrates that problem.

 

Happy Tweening!

@Rodrigo
Sorry,  But it will remain like this on mobile, where the mobile image will be slightly hidden.

[Rodrigo]

Hi,

 

I've been waiting for some update here. You still haven't provided a specific and clear description of the issue you're having here.

 

Happy Tweening!

[Atul Singh]

On 10/15/2023 at 4:24 AM, Rodrigo said:

Hi,

 

I've been waiting for some update here. You still haven't provided a specific and clear description of the issue you're having here.

 

Happy Tweening!

@Rodrigo  Sorry, but it will appear the same as the current design. The mobile image will be slightly hidden. On mobile, I would like the image to change immediately as soon as it comes over the second card image on the mobile image.

https://www.awesomescreenshot.com/video/21616934?key=ccb6b78093dce2fc20810fc2f30fe0ee

[Rodrigo]

Hi,

 

I don't exactly follow what's the issue here TBH. Maybe I'm missing something.

 

This is what I'm seeing in your last example when I use Chrome's devtools device bar:

https://i.imgur.com/SQjGxYD.mp4

 

Please be as explicit as possible in terms of what you want to do and what exactly is not working.

 

Happy Tweening!