mosik4 Posted June 3, 2020 Share Posted June 3, 2020 Hi, I am trying to get my website to work smoothly with Scroll Trigger. But the address bar is continuously hiding and showing when I am scrolling through the page which destroys the user experience. I tried searching for solutions but to no avail - might be my lack of knowledge of css. Here is my website (try it on mobile to understand what I mean):https://tbdalen.github.io/ And here is my repo:https://github.com/tbdalen/tbdalen.github.io Here is my inspiration for this site and they managed to prevent hiding the address bar. They have used hammerjs here though:https://dpotferstudio.com/ Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 3, 2020 Share Posted June 3, 2020 1 hour ago, mosik4 said: the address bar is continuously hiding and showing when I am scrolling through the page which destroys the user experience. What's the issue with this? I don't feel like it destroys the user experience. In order to do this, you'll need to not use the normal document scrolling. I recommend trying to get the body to scroll instead: html { overflow: hidden; } body { width: 100%; height: 100%; position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; } Then in the ScrollTrigger you set the scroller to the body: scroller: document.body Demo: See the Pen KKVKQVE by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
mosik4 Posted June 3, 2020 Author Share Posted June 3, 2020 Thank you for your reply Zach. I still can't figure it out on my website though. I think I am struggling because of the type of fixed 100vh effect that I am after. I have a fixed div inside of the fixed body. And css grid inside of the fixed div. What am I missing here? Quote What's the issue with this? I don't feel like it destroys the user experience. I was too harsh on my phrasing here. Since I am going for that 100vh feel I dont want to have the address bar going in and resizing my container. Link to comment Share on other sites More sharing options...
OSUblake Posted June 3, 2020 Share Posted June 3, 2020 2 hours ago, mosik4 said: 100vh effect 100vh might not be what you think in mobile. https://github.com/bokand/URLBarSizing 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 3, 2020 Share Posted June 3, 2020 2 hours ago, mosik4 said: I am struggling because of the type of fixed 100vh effect that I am after. I have a fixed div inside of the fixed body. And css grid inside of the fixed div. What am I missing here? What exactly is going wrong? Can you please make a minimal demo using CodePen? 1 Link to comment Share on other sites More sharing options...
mosik4 Posted June 3, 2020 Author Share Posted June 3, 2020 Thank you for your replies. I think you are correct Zach. I can not lock the address bar and use ScrollTrigger. Locking down the address bar requires overflow to always be hidden. And you have to have overflow on scroll or auto at some point in order to scroll with ScrollTrigger. Dpotferstudio manages to do this because hammerjs does not have these same requirements as its not based on scrolling and can work with overflow hidden. http://dpotferstudio.com/ This is atleast my theory here. Correct me if I am wrong. Link to comment Share on other sites More sharing options...
mosik4 Posted June 3, 2020 Author Share Posted June 3, 2020 Well that was not exactly true. I can see that dpotferstudio.com has overflow-y: scroll in the main wrapper. What is going wrong for me is that I can not figure out how to lock the address bar on mobile browsers while doing animations with ScrollTrigger. <!DOCTYPE html> <html lang="en"> <head> <title>dpotferstudio</title> </head> <body> <div class="main-wrapper"> <div id="app"> </div> </div> </body> </html> html { position: fixed; width: 100%; height: 100vh; overflow: hidden; } body { position: fixed; width: 100%; height: 100vh; overflow: hidden; } .main-wrapper { width: 100vw; height: 100vh; overflow-x: hidden; overflow-y: scroll; } #app { overflow: hidden; } Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 3, 2020 Share Posted June 3, 2020 Please make a minimal demo of your setup including a basic animation that you're trying to include if you'd like more of our feedback on a potential solution. Link to comment Share on other sites More sharing options...
Arul Posted May 23, 2023 Share Posted May 23, 2023 Hi @ZachSaucier, I have been facing the same issue. I have replicated my HTML structure in the below codepen demo. I just wanted to keep the address bar visible always and able to trigger the animations on scroll. After setting all the overflow and position properties, the address bar is fixed now. But the scrolltrigger animations are not working as expected. The animations are getting triggered only using scroll wheel and not by touch swipe. Codepen: See the Pen zYmydjq?editors=0010 by arulpraba (@arulpraba) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted May 23, 2023 Share Posted May 23, 2023 Hi, Just use the normalizeScroll method https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Hopefully this helps. Happy Tweening! 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