IvanBell Posted June 18, 2020 Share Posted June 18, 2020 Hello! I have a header which has 100vw width and 100vh height. Inside of it there are two slides that will change each other every 5 seconds. I want my header to disappear smoothly as I scroll down. Here's my HTML: <header class="header"> <div class="header_bg1 slide"> <strong class="header_text">Slide 1</strong> </div> <div class="header_bg2 slide"> <strong class="header_text">Slide 2</strong> </div> </header> Here's my CSS: .header { width: 100vw; height: 100vh; display: flex; overflow: hidden; } .header_bg1 { background: url(assets/header1.jpg); } .header_bg2 { background: url(assets/header2.jpg); } .slide { min-width: 100vw; width: 100vw; height: 100vh; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; transition: transform 500ms ease; } To get the desired result I wanted to use gsap ScrollTrigger. So added CDN and the following code (js code for my slideshow is not needed): <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); gsap.to(".header", { scrollTrigger: { trigger: ".header", pin: true, scrub: true }, opacity: 0 }); </script> Everything is working nicely. The only problem is that with this gsap code my header changes its size and horizontal scrollbar appears. If I delete the line scrub: true, the scrollbar disappears. What can I do to avoid this horizontal scrollbar? Thank you very much! It is my first post in this forum and English is not my first language, so please forgive me if my explanation is not clear Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 Hey Ivan and welcome to the GreenSock forums. First thing: don't pair CSS transitions with GSAP. It would make the animation laggy. The main issue is that there's a default margin on the body. So your 100vw elements go over the bounds. Remove the margin on the body and it should fix it. See the Pen VwePLXQ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 Thanks for your reply! My CSS includes this code: * { margin: 0; padding: 0; box-sizing: border-box; } So I don't think the problem is in margin. Also, if I don't use gsap, there is no horizontal scrollbar. It only appears when I add scrub: true. Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 By the way, ZachSaucier, in your codepen I do have horizontal scrollbar Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 Please modify my demo to recreate you situation then. It's hard to help blindly. 1 Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 I can't figure out how to add codepen to my post. Here's the link: See the Pen YzwNyzJ by iBeliakov (@iBeliakov) on CodePen It has the full code. I only changed background image to simple color, because I can't attach images to my codepen. I don't know why, but even if I delete the gsap code, the scrollbar does not disappear in codepen, though it does disappear on my computer. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 A few notes: We recommend using gsap.set() instead of using jQuery or setting transforms yourself. We recommend not using CSS transitions (why not use GSAP? They're more powerful and you're using GSAP anyway). You don't need the prefixes if you are going to use transitions. If you're checking the state of a boolean you don't need ==, just use the variable or !variable. You don't need the .ready() check. I don't see any horizontal scrollbar on that demo. Do you? Are you sure that your zoom level is normal? Try pressing CTRL/CMD + 0 to make sure. See the Pen XWXpmqq?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 Thank you for your notes. I am totally new to gsap, so I used CSS transitions and jQuery because I am used to them. I will definitely try to use only gsap instead. In your demo I do see the horizontal scrollbar (zoom is okey in my browser). Also, I have tried to put your script in my code, and the scrollbar is still present. I have tried to upload the code to netlify. I can see the scrollbar there as well. Could you check it out? Thank you for being so patient with me! https://ironhorse.netlify.app/ Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 1 minute ago, IvanBell said: I have tried to upload the code to netlify. I can see the scrollbar there as well. Could you check it out? I see no scrollbar on that website. What browser and OS are you on? Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 Windows 10. I have tried Chrome as well as Firefox and Opera (newest versions). All of them show scrollbar. Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 Here's a screenshot of that website: Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 I have checked it out on my iPad. No scrollbar there. Very strange Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 It might have to do with how Windows reports their width calculations (scrollbars included). We'll see if we can work around it in ST. In the mean time you could use an extra container to hide the overflow: See the Pen JjGEGKQ by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted June 18, 2020 Share Posted June 18, 2020 2 minutes ago, ZachSaucier said: It might have to do with how Windows reports their width calculations Windows is fine. People just incorrectly use 100vw. vw does NOT include scrollbars. Better to use 100%. 2 Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 Thank you so much! I am happy that I decided to ask for help at this forum. The extra container solves the problem. Thanks again Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 1 minute ago, OSUblake said: People just incorrectly use 100vw I suppose that makes sense since Macs have an overlaid scrollbar. Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 I tried changing 100vw to 100% before creating this topic, it didn't help Link to comment Share on other sites More sharing options...
OSUblake Posted June 18, 2020 Share Posted June 18, 2020 2 minutes ago, IvanBell said: I tried changing 100vw to 100% before creating this topic, it didn't help You're slides are at 100vw. That'd push it 17px into overflow. Link to comment Share on other sites More sharing options...
IvanBell Posted June 18, 2020 Author Share Posted June 18, 2020 I tried setting both the container and the slides to 100%, the problem was not solved. But maybe missed something. Thank you Link to comment Share on other sites More sharing options...
OSUblake Posted June 19, 2020 Share Posted June 19, 2020 @GreenSock is this a bug? Horizontal scrollbar showing when using pin. 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