ScrollTrigger adds undesired scroll

[IvanBell]

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

[ZachSaucier]

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

[IvanBell]

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.

[IvanBell]

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

[ZachSaucier]

Please modify my demo to recreate you situation then. It's hard to help blindly.

[IvanBell]

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.

[ZachSaucier]

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

 

[IvanBell]

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/

[ZachSaucier]

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?

[IvanBell]

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

[IvanBell]

Here's a screenshot of that website:

 

[IvanBell]

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

[ZachSaucier]

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

[OSUblake]

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%.

 

 

[IvanBell]

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

[ZachSaucier]

1 minute ago, OSUblake said:

People just incorrectly use 100vw

I suppose that makes sense since Macs have an overlaid scrollbar.

[IvanBell]

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

[OSUblake]

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.

 

[IvanBell]

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

[OSUblake]

@GreenSock is this a bug? Horizontal scrollbar showing when using pin.