How to fixed any section using GSAP scroll smoother and scroll trigger

[nafiul09]

Hello guys,

So I am facing a small problem related to scroll smoother and scroll trigger. I have explained the whole problem in this 4 mins video. Can anyone help me to get this fixed please.

 

Video link: https://www.loom.com/share/11acaf84a85a40f8a616db46a7aacdb5

Thanks,
Nafiul

[Rodrigo]

Hi @nafiul09 and welcome to the GreenSock forums!

 

First, thanks for being a Club GreenSock member and supporting GreenSock!

 

Normally this is not the best alternative to get a solution to your issues. Is always better to create a minimal demo that shows the issue you're having.

 

In this case I can think of two solutions: one that you already know and mention, which is to move the fixed element outside the smooth wrapper. The other is to use the paused method for the ScrollSmoother instance. Basically you can pause the instance when you open the menu and un-pause it when it's closed:

const smoother = ScrollSmoother.create({ /* Your Config Here */ });

const openMenu = () => {
  smoother.paused(true);
  // Rest of the menu code
};

const closeMenu = () => {
  smoother.paused(false);
  // Rest of the menu code
};

Another option could be if you use a timeline to toggle the menu show/hide animation:

const smoother = ScrollSmoother.create({ /* Your Config Here */ });

const menuTimeline = gsap.timeline({
  onStart: () => smoother.paused(true),
  onReverseComplete: () => smoother.paused(false),
});

Hopefully this helps. If you keep having issues, please remember to include a minimal demo.

Happy Tweening!