[gsap scrollsmoother plugin conflict with fancybox modal with scroll]

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.

[gsap scrollsmoother plugin conflict with fancybox modal with scroll]

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

[gsap scrollsmoother plugin conflict with fancybox modal with scroll]

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

[gsap scrollsmoother plugin conflict with fancybox modal with scroll]

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

[What wrong with smooth scrolling?]

Okay i try to use smoother.scrollTo and this works well, but what wrong with native archon links?

[What wrong with smooth scrolling?]

Hi. I cant understand what wrong with website when i click on archon link https://gyazo.com/9a71088cf68c12d1f8e2f7f608bb4c87

How can I determine what the problem is? When I turn off the smooth scroll, everything works ok. But along with it, the last section on the page is thrown up and the site cannot be viewed, because nothing but this block remains on the site.
At the same time, if I click on an anchor link that does not lead to the very bottom, but one section below, then everything works fine.
Maybe someone here met with a similar problem.