Jump to content
Search Community

Container show space out of range with parallax effect

Lichay test
Moderator Tag

Recommended Posts

When I am use parallax effect and scrolling down it shown an extra white space how can block it without disturb full effects on top and bottom parallax.

 

Moreover the is -data-speed="0.3"- if I am changing it to 0.9 for example it still do the same problem, it feel the first record on html is read and stay with extra space.

How can I fix that issue?

Thanks.

See the Pen eYdQyQv by lichaytiram (@lichaytiram) on CodePen

Link to comment
Share on other sites

5 minutes ago, ZachSaucier said:

Hey Lichay. Maybe you're looking for the pinSpacing: false option of ScrollTrigger? It's unclear what your end goal is. 

I just want the extra spacing be off and pinSpacing isn't help for this problem.

 

Have white space under footer container should be block and scrolling down on parallax container be block too 

Link to comment
Share on other sites

4 minutes ago, Lichay said:

pinSpacing isn't help for this problem

It removes the space under the green section. What spacing are you referring to if that's not it?

 

5 minutes ago, Lichay said:

Have white space under footer container should be block and scrolling down on parallax container be block too 

Sorry, I have no idea what you mean by this comment.

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

It removes the space under the green section. What spacing are you referring to if that's not it?

 

Sorry, I have no idea what you mean by this comment.

Take some pictures

watch black arrow that I picture inside, It show to you on first picture two scrolling on the right and a second picture it show to you white hole under footer container.

 

you can see it yourself with codepen link above^

 

1748421906_bandicam2021-01-1418-21-49-764.thumb.jpg.7d16c8a209201cbfe70eff2b4bb0b309.jpg

28315234_bandicam2021-01-1418-22-04-759.thumb.jpg.9b34b6cf009ab4947fdbe47f622e288b.jpg

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Sorry, I still have no idea what you're trying to say or what the issue is. Maybe someone else can help.

wow u r seriously!

I sent a pictures for you type everything why it so hard with you

it basic understanding

Link to comment
Share on other sites

 

The part with the white space on the right side is probably related to your elements overflowing your container on scroll thus you will see that white space (sort of where the browser-scrollbar for that container would be). At some point I saw the scrollbar being attached there, so I am pretty sure it is related to that.

 

Set overflow: hidden to your .parallaxContainer and things should be resolved with this regard - they were on my end.

 

I don't get any white-space at the end, but since seeing two scrollbars on your picture, my guess would be it is just related to that or something similar along those lines.

 

 

58 minutes ago, Lichay said:

I sent a pictures for you type everything why it so hard with you

it basic understanding

 

I don't think becoming rude is a nice way to go, when you ask someone for free help.

If he didn't understand, he just didn't understand.

 

No one of us becomes rude at you because you didn't know, that setting an overflow: hidden gets rid of that scrollbar that probably causes your issues, which also is a matter of understanding basic CSS. Just my opinion. Hope my suggestion with overflow: hidden helps, though. :) 

  • Like 1
Link to comment
Share on other sites

1 hour ago, mikel said:

 

In the 'normal view' there is no problem for me.

Can that be the presentation mode? The picture looks very unusual.

In presentation mode / toolbar above, a white stripe appears below.

look on the arrow , have two scrolling instead one

Link to comment
Share on other sites

39 minutes ago, akapowl said:

 

The part with the white space on the right side is probably related to your elements overflowing your container on scroll thus you will see that white space (sort of where the browser-scrollbar for that container would be). At some point I saw the scrollbar being attached there, so I am pretty sure it is related to that.

 

Set overflow: hidden to your .parallaxContainer and things should be resolved with this regard - they were on my end.

 

I don't get any white-space at the end, but since seeing two scrollbars on your picture, my guess would be it is just related to that or something similar along those lines.

 

I don't think becoming rude is a nice way to go, when you ask someone for free help.

If he didn't understand, he just didn't understand.

 

No one of us becomes rude at you because you didn't know, that setting an overflow: hidden gets rid of that scrollbar that probably causes your issues, which also is a matter of understanding basic CSS. Just my opinion. Hope my suggestion with overflow: hidden helps, though. :) 

I don't understand why you don't see it can you upload a picture? to see it.

yes I think to add overflow but when I am doing it, it block overflow on top and scrolling on top gone just try it on code and you can see it.

just add it on code and see what I mean

 

I know no one need to help but I give him all info and he try to "lower head" and I hate people that doing this

Link to comment
Share on other sites

 

Yeah, I see the problem of the elements being cut off now - wasn't thinking about that before.

 

I'm guessing the scroll-bar appearing is just bound to happen because at some point, the height of the container will simply just exceed the height of the window and besides setting the overflow to hidden, there is nothing I could think of, that would prevent your issues due to that.

 

This is not a GSAP issue though (you will see, when you uncomment all your JS that this still is the case) - It is just how it is bound to work, I guess.

 

I tinkered around with it quite a bit now, and I don't think there is a real or easy 'fix' for that. I only got to cover-up the issue to a certain degree by setting a width of 100vw to your .parallaxContainer and setting the top of your second box to  top: calc(100vh + 300px) instead of top: 1200px

 

This way the effect stays intact plus also works on those smaller window-heights (at least on my end) and the issues only occur when the window-height is very very small. Again: this is not a perfect solution because I don't think there is one - or at least I can not think of one.

 

See the Pen dd0f4ea643f8ce01e9059768dc1ba34c by akapowl (@akapowl) on CodePen

 

Maybe this helps somewhat though.

Cheers.

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, akapowl said:

 

Yeah, I see the problem of the elements being cut off now - wasn't thinking about that before.

 

I'm guessing the scroll-bar appearing is just bound to happen because at some point, the height of the container will simply just exceed the height of the window and besides setting the overflow to hidden, there is nothing I could think of, that would prevent your issues due to that.

 

This is not a GSAP issue though (you will see, when you uncomment all your JS that this still is the case) - It is just how it is bound to work, I guess.

 

I tinkered around with it quite a bit now, and I don't think there is a real or easy 'fix' for that. I only got to cover-up the issue to a certain degree by setting a width of 100vw to your .parallaxContainer and setting the top of your second box to  top: calc(100vh + 300px) instead of top: 1200px

 

This way the effect stays intact plus also works on those smaller window-heights (at least on my end) and the issues only occur when the window-height is very very small. Again: this is not a perfect solution because I don't think there is one - or at least I can not think of one.

 

 

 

 

Maybe this helps somewhat though.

Cheers.

 

 

Thanks .

But it fix by top: calc(100vh + 300px); and if I want to use 1200px it be still a problem 

in my brain the height is const totalScroll = 1500; as px , but write calc(100vh + 300px); can be an issue for some cases

Can you fix it from gsap or another way? I want it to be more clear

Link to comment
Share on other sites

29 minutes ago, Lichay said:

Can you fix it from gsap or another way? I want it to be more clear

 

Sorry, I don't understand. Could you please try to rephrase?

What is it you mean by 'fix it'?

 

Do you mean the issue itself?

Well, I tried my best, but I didn't find another way to it, than what I did above.

 

  • Thanks 1
Link to comment
Share on other sites

3 minutes ago, akapowl said:

 

Sorry, I don't understand. Could you please try to rephrase?

What is it you mean by 'fix it'?

I mean if you can fix that problem with gsap.

but never mind it work only add to body 

width100vw;

 and it work perfectly .

Thanks you for helping and Good Day

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...