[Open modal with Horizontal Scroll]

21 hours ago, Rodrigo said:

Hi,

 

You are using GSAP and ScrollTrigger 3.11.4. I forked your example and updated both to 3.11.5 and it works as expected on an iPad and an Android phone:

 

 

 

Here is the debug link (no iframes):

https://cdpn.io/pen/debug/yLRQozy

 

As for the second question, I see everything working in the way it should, maybe I'm missing something 🤷‍♂️

 

Hopefully this helps.

Happy Tweening!

Thanks again @Rodrigo.

 

It fixed scroll jumping on mobile screen. It was obviously bug with previous version of scroll Trigger.

 

As for the second question I recorded video just to show an behavior of disappeared content.

 

https://tempclip.com/q3uhKDnNJW7Jtyx/watch

 

I figure out if I open for instance first modal and closed it, and after that open second one translate properties has in start point some random value (translate(0, 2000px) for example), but if I keeping scrolling start point back to value of 0. If I turn off scroll Normalize it works well but content jittering.

 

You can't see this behavior on no iframes version because there are missing meta tag for responsive design I think.

 

Thanks a lot.

 

Best,

Dragan

[Open modal with Horizontal Scroll]

Hi @Rodrigo. My apologizes because I late.

 

Here is the example on codepan

 

But also I provide link to my server with problem: https://draganpantelic.com/example/

 

There are two problem on mobile:

 

1. Jittering/Flickering on mobile screen

2. If scroll horizontal screen and close that one and back to another modal content disappeared (when turn off scroll scroll.normalize, it works well)

 

Thanks a lot for your support.

 

Best,

Dragan

 

 

[Open modal with Horizontal Scroll]

On 5/15/2023 at 7:57 PM, Rodrigo said:

Hi,

 

Using ScrollTrigger.normalizeScroll() seems to fix it:

ScrollTrigger.normalizeScroll({
  allowNestedScroll: true,
  target: [modalWrapper],
});

I updated the codepen example. Here is the link just in case:

 

 

 

Here is the debug version without iframes:

https://cdpn.io/pen/debug/OJBvBjB

 

Hopefully this helps.

Happy Tweening!

Thanks @Rodrigo

 

It works on desktop, but on mobile devices the problem hasn't gone. In your example it works very well but in my solution it isn't case because I have parent with fixed element and inner multiple child with position absolute where ever element get class active to show content on click (popup). I think the problem maybe with absolute positioning. I'm working on project locally, I need a time to provide codepan with current solution. I ll do it later on.

I appreciate your time. Thank you.

 

Best,

Dragan

[Open modal with Horizontal Scroll]

On 5/9/2023 at 11:51 PM, Rodrigo said:

Hi @drpantelic and welcome to the GreenSock forums!

 

That is not something that might be extremely trivial to create and make it 100% dynamic and is a bit beyond what we can do in these free forums.

 

This is the best I can do with the time I have right now:

 

 

 

On 5/9/2023 at 11:51 PM, Rodrigo said:

 

Hopefully this is enough to get you started.

Happy Tweening!

Hi @Rodrigo

 

Thanks for sharing your solution. It was definitely helped. I missed this line:

scroller: parent

But now I have problem with flickering on scrolling on mobile primarily, but I detected same problem on Opera browser on desktop. I didn't provide new codepen because this problem appere on codepen solution. I uploaded your solution on my domain. Just in case you will see what's problem on mobile screen.

 

https://draganpantelic.com/test/

 

Thanks a lot.

 

Best,

Dragan

[Open modal with Horizontal Scroll]

Hi everyone,

I'm stucking with horizontal scroll. I have tried to achived open modal with horizontal scroll. This is example that I have to achived: https://www.apple.com/iphone-14/ (click on some banners). I figured out it's problem with body because horizontal scroll trigger lookingbody height or am I wrong. In this case I think its need to follow scroll modals it self? In my case scroll isn't going to the end of page.

 

 

I didn't find similar topic. Thanks in advance.

Best.

See the Pen ExdELBj by drpantelic (@drpantelic) on CodePen