Jump to content


Issue with GSAP ScrollTrigger

Go to solution Solved by akapowl,

Recommended Posts

Hey everyone, I just completed a website for a client and I am using the scrollTrigger plugin. I have an issue however, for some reason there seems to be some weird invisible barrier that is preventing the user to interact with the navigation on larger screen sizes. However once you are on a screen size that is 1920 x 1080 then it doesn't affect the nav. But anything lower it does. I have the link to the website, please try it out on a screen size of around 900px wide or so and try interacting with the navigation, it seems it is blocked and the mouse icon is changed to the grabbing icon.

I also have a picture using dev tools that shows it's because of the scrollTrigger.

Link: Shoesters (shoesters-d25da.web.app)

Screenshot (100).png

Link to comment
Share on other sites

Hey, @Jakebogan. Unfortunately we don't have the resources to troubleshoot live web sites for free - if you'd like some help, please create a minimal demo and we'd be happy to take a peek. I did look at the site and I see what you mean about the barrier but I'm not sure why you think that's related to ScrollTrigger. Can you elaborate a bit? 


To me, it appears as though you've got a ".map" iframe sitting on top of things, obscuring pointer events. 

  • Like 2
  • Haha 1
Link to comment
Share on other sites

  • Solution
6 hours ago, Jakebogan said:

However once you are on a screen size that is 1920 x 1080 then it doesn't affect the nav.


For me it does even on larger screens.


As @GreenSock mentioned, you've got the iFrame/map covering things up.

I can't tell you why because as he also mentioned, debugging a whole live website is a bit much.


What I can hint you to though, is this:


Since you are tweening on the '.locations-map' anyways (connected to a ScrollTrigger as it seems)...


.from(".locations_map",{scale:0,opacity:0,duration:1.2,ease:"elastic.out(1, 0.75)"},"-=1")


...instead of tweening .from opacity: 0, you could try tweening from autoAlpha: 0 which would add an extra visibility: hidden and thus that element wouldn't be accessable to begin with - no matter how it is positioned.


See this example:


See the Pen 52081a007b749da0e8c690ed3aff15fc by akapowl (@akapowl) on CodePen


  • Like 2
Link to comment
Share on other sites

Okay, I’m sorry it was late at night and I thought it was because of scrollTrigger. Reason being is because as soon as I took it all out everything was fine and I also could have sworn I saw scrollTrigger elements blocking the nav. But akapowl, thanks for the hint that really helped!

  • Like 1
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.