Jump to content
Search Community

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

nafiul09 test
Moderator Tag

Recommended Posts

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 = () => {
  // Rest of the menu code

const closeMenu = () => {
  // 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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...