gsap scrollsmoother plugin conflict with fancybox modal with scroll

[einzelwerk]

Hi.

I've been trying to understand the cause of this madness for 3 days now. I don’t know if it’s fancybox or smoosh scrolling, but when I turn off smoosh scrolling, there is no problem.
What is the problem:
When opening a modal window WITH A SCROLLBAR and closing it, the entire page of the site twitches. In my case, this prevents me from scrolling to another section after closing the modal.
By some miracle I was able to make a minimal demo of this.
I would be grateful for any advice and help.
Thank you

See the Pen oNyKzLp by poylar (@poylar) on CodePen

[Cassie]

Hi there - I can't reproduce this. Can you give me some steps to find the issue?

 

Is it a specific browser or device by any chance?

[GreenSock]

I can't seem to reproduce the problem in any browser either. Any tips on replicating, @einzelwerk?

[einzelwerk]

19 hours ago, Cassie said:

Hi there - I can't reproduce this. Can you give me some steps to find the issue?

 

Is it a specific browser or device by any chance?

 

14 hours ago, GreenSock said:

I can't seem to reproduce the problem in any browser either. Any tips on replicating, @einzelwerk?

im sorry. please try one more time.

you must see something like this: https://gyazo.com/f0a223997dc2398e76126f7d6d6ebea7 (look at scrollbar and page)

 

windows, chrome latest

[einzelwerk]

and you should open full screen codepen, with sidebar left or right side

[Rodrigo]

Hi,

 

The only thing I can see is the content moving down in the screen, most likely because of the way Fancybox works. I had a quick look at the API of Fancybox and I wasn't able to programmatically activate the modal in the example you posted. Right now it seems that fancybox gets the data-src of the button and automatically opens the modal for you. What you should try is to create the fancybox instance using the new Fancybox method in order to set the paused state of the ScrollSmoother instance there, something like this:

new Fancybox(
  [
    {
      src: /* your sorce here */,
      type: /* Type here */,
    },
  ],
  {
    on: {
      "*": (event, fancybox, slide) => {
        console.log(`event: ${event}`);
      },
      done: (fancybox, slide) => {
        // modal is open pause ScrollSmoother
        smoother.paused(true);
      },
      destroy: (fancybox, slide) => {
        // modal is closed un-pause ScrollSmoother
        smoother.paused(false);
      },
    },
  }
);

Unfortunately Facnybox is a third party plugin and we don't have the time resources for digging deep into it's API and see the best way to make it work. Hopefully this approach helps you solve the issue. Let us know if you have more questions.

 

Happy Tweening!

[einzelwerk]

On 12/16/2022 at 10:11 PM, Rodrigo said:

Hi,

 

The only thing I can see is the content moving down in the screen, most likely because of the way Fancybox works. I had a quick look at the API of Fancybox and I wasn't able to programmatically activate the modal in the example you posted. Right now it seems that fancybox gets the data-src of the button and automatically opens the modal for you. What you should try is to create the fancybox instance using the new Fancybox method in order to set the paused state of the ScrollSmoother instance there, something like this:

new Fancybox(
  [
    {
      src: /* your sorce here */,
      type: /* Type here */,
    },
  ],
  {
    on: {
      "*": (event, fancybox, slide) => {
        console.log(`event: ${event}`);
      },
      done: (fancybox, slide) => {
        // modal is open pause ScrollSmoother
        smoother.paused(true);
      },
      destroy: (fancybox, slide) => {
        // modal is closed un-pause ScrollSmoother
        smoother.paused(false);
      },
    },
  }
);

Unfortunately Facnybox is a third party plugin and we don't have the time resources for digging deep into it's API and see the best way to make it work. Hopefully this approach helps you solve the issue. Let us know if you have more questions.

 

Happy Tweening!

i guess this cuz fancybox runtime render new DOM-node on open.

for future readers:

set fancybox modal height to 0, and after opened set height to auto.

this help me, but I don't think this is the best solution.