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