IvanBell

I tried setting both the container and the slides to 100%, the problem was not solved. But maybe missed something. Thank you

I tried changing 100vw to 100% before creating this topic, it didn't help

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

I have checked it out on my iPad. No scrollbar there. Very strange

Here's a screenshot of that website:

Windows 10. I have tried Chrome as well as Firefox and Opera (newest versions). All of them show scrollbar.

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/

I can't figure out how to add codepen to my post. Here's the link: https://codepen.io/iBeliakov/pen/YzwNyzJ 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.

By the way, ZachSaucier, in your codepen I do have horizontal scrollbar

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.

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