Open modal with Horizontal Scroll

[drpantelic]

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

[Rodrigo]

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:

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

 

Hopefully this is enough to get you started.

Happy Tweening!

[drpantelic]

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

[Rodrigo]

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:

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

 

Here is the debug version without iframes:

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

 

Hopefully this helps.

Happy Tweening!

[drpantelic]

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

[drpantelic]

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

 

 

[Rodrigo]

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:

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

 

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!

[GreenSock]

iOS Safari has a ton of scroll-related bugs that Apple knows about but hasn't resolved (some for years), so that makes things challenging. 

 

I'd strongly advise against using a separate scrolling container rather than the main <body>, for the record. If you MUST, though, you can try an undocumented and unofficial property that normalizeScroll() will recognize called content. You'd have to wrap your content in a <div> that we'll call content, and pass that to normalizeScroll() like: 

ScrollTrigger.normalizeScroll({ target: "#scroller", content: "#content" });

The whole point of that is to work around major problems in iOS, ScrollTrigger literally has to add/remove a transform on every other tick. iOS Safari reports incorrect coordinates on touchmove events if you alter the scroll position on the same tick. So that content wrapper is the thing that gets the transform to move it up/down to smooth out the movement and normalize scroll. 

 

Again, that is not an officially supported feature right now and I cannot guarantee it'll always be there, but feel free to give it a try and let us know if it resolves anything for you. Or as Rodrigo said, perhaps it's as simple as updating to the latest version.

[drpantelic]

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

[Rodrigo]

Hi,

 

I've been fiddling with the latest codepen for a while now:

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

 

And there are a few things that seem odd to me, like the close event handler:

close.forEach((close) => {
  close.addEventListener("click", () => {
    // show body content
    gsap.to(document.querySelector(".body-content"), {
      xPercent: 0,
      ease: "Power1.easeOut",
      scrub: 0.5,
      duration: 0.7
    });

    // push modal wrapper out of screen
    gsap.to(modalWrapper, {
      xPercent: 100,
      ease: "Power1.easeOut",
      duration: 1
    });

    modals.forEach((modal) => {
      modal.classList.remove("active");
      modalWrapper.classList.remove("active");
      document.body.style.overflowY = "scroll";
      modalWrapper.scroll({ top: 0, left: 0 });
      // remove all style
      gsap.from(modal, {
        clearProps: true,
        onComplete: function () {
          ScrollTrigger.getAll().forEach((trigger) => {
            trigger.kill();
          });
        }
      });
    });

    // modal reset
    progress.forEach((progress) => {
      gsap.from(progress, {
        clearProps: true,
        onComplete: function () {
          ScrollTrigger.getAll().forEach((trigger) => {
            trigger.kill();
          });
        }
      });
    });
  });
});

Particularly those loops you have at the end. I removed them but the problem remains. I tried using GSAP Context with no luck.

 

Unfortunately we don't have the time resources to comb through all your code and try to find where this breaks down. My advice is to reduce this to a single button that moves the content to the left of the screen and the modal to the center and make just that setup work. My best guess is that the problem lies in a bunch of code that you have in place that it could be causing this issues.

 

Also when and if you need to clear the styles that GSAP instances add to elements you can use the revert method in the onComplete callback of the longest animation  in your close handler or even better, make that a single timeline in the close event. Make the modal horizontal animation a timeline as well and store that in a variable or a GSAP Context instance and then revert which ever you're using:

https://greensock.com/docs/v3/GSAP/Timeline/revert()

 

https://greensock.com/docs/v3/GSAP/gsap.context() 

 

As I said before I'd make this a single element and a single modal and avoid loops for now.

 

Hopefully this helps.

Happy Tweening!