Jakebogan Posted March 14, 2021 Share Posted March 14, 2021 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) Link to comment Share on other sites More sharing options...
GreenSock Posted March 14, 2021 Share Posted March 14, 2021 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. 2 1 Link to comment Share on other sites More sharing options...
Solution akapowl Posted March 14, 2021 Solution Share Posted March 14, 2021 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 2 Link to comment Share on other sites More sharing options...
Jakebogan Posted March 14, 2021 Author Share Posted March 14, 2021 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now