Empty Blank space below div

[Charlyta]

I know that problably is a repeated question but I don´t understand why appears a great blank space bellow a div when scrolling. 

Is it more of a styling issue?  Any help would be appreciated.

Thanks in advance.

See the Pen PoRjmda by charlyta (@charlyta) on CodePen.

Edited July 22, 2022 by Charlyta
codepen changed

[Dipscom]

Hi Cahrlyta,

 

You're adding the great blank space yourself with the following JS in your code:

 

function setHeight() {
  height = container.clientHeight
  document.body.style.height = height + "px" // <- This bit here.
}

I don't know why you are adding it or what is the effect you are after but that's what is causing the big white space.

 

A tip for the future, try to simplify your code all the way to the bare minimum possible when trying to work things out. In this sample of yours, you have far more code, HTML, CSS and JS needed to illustrate your issue. I bet if you stripped it down yourself, you would have worked out what was going on.

[Charlyta]

Thanks for your fast response Dipscom!

I have simplify the code and I can see that this problem appears using locomotive too, so I supose there is something wrong abot the css using grid.

Thanks

 

[Dipscom]

Always happy to help.

 

Is there a particular effect that you are after? There are several examples for ScrollTrigger on the docs section. Maybe something there might help you or one member might have a tip or two for you here.

[Charlyta]

Thanks Dipscom!

 

I only want to achieve a simple scroll using grid.. this is my ultra simple example in codepen. As you could see there is ever a blank space below the div.. (see the new codepen above) Thanks!!

[Dipscom]

Hey Charlyta!

 

Thanks for simplifying your example, it's much easier to reason now.

 

I see you are using Locomotive Scroll - I have zero experience with it but had a quick look at their documentation and noticed some discrepancies on your setup to theirs. I think you are setting things up wrongly. I can't say exactly what though.

 

What do you mean by "a simple scroll using grid"? Do you mean you want the scrolling to be smooth? If that's the case and you don't want to be (or can't afford) a Club Greensock member, you'll have to read into Locomotive Scroll documentation because the issue is likely to be with its setup.

[Charlyta]

Hi Dipscom!

 

Yes! You are right!

I want the scrolling to be smooth. Now I am using Gsap and TweenMax in my example. There is the same error and blank space

 

[Dipscom]

First, why did you downgrade GSAP to use v1.x.x? That's super, super, super old. I'd advise against that.

 

From this exchange that we are having I can only conclude that your question really is "how can I create a smooth scroll without using GSAP's ScrollSmoother"? Because it's super simple using GSAP.

 

Ultimately, your question has nothing to do with GSAP, there's very little we can do to help you here as we're limited on the amount of support offered because there is only a small group of volunteers and an even smaller GSAP team.

 

Howerver, you're in luck as I was curious enough to see how does Locomotive scroll works. See here what a Locomotive setup looks like:

 

See the Pen 17b6d25ee70ea34d37ab2a0e666937b1 by dipscom (@dipscom) on CodePen.

 

Notice you need to add some CSS as well as the JS package for the library.

 

Right, you should be good to go. Remember we won't be fixing your issues here. We will only be able to help you with GSAP-related issues.

 

Happy tweening!

[Charlyta]

Thanks a lot, Dipscom!! and sorry...