Lichay Posted January 14, 2021 Share Posted January 14, 2021 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 More sharing options...
ZachSaucier Posted January 14, 2021 Share Posted January 14, 2021 Hey Lichay. Maybe you're looking for the pinSpacing: false option of ScrollTrigger? It's unclear what your end goal is. Link to comment Share on other sites More sharing options...
Lichay Posted January 14, 2021 Author Share Posted January 14, 2021 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 More sharing options...
ZachSaucier Posted January 14, 2021 Share Posted January 14, 2021 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 More sharing options...
Lichay Posted January 14, 2021 Author Share Posted January 14, 2021 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^ Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 14, 2021 Share Posted January 14, 2021 Sorry, I still have no idea what you're trying to say or what the issue is. Maybe someone else can help. Link to comment Share on other sites More sharing options...
Lichay Posted January 14, 2021 Author Share Posted January 14, 2021 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 More sharing options...
mikel Posted January 14, 2021 Share Posted January 14, 2021 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. Link to comment Share on other sites More sharing options...
akapowl Posted January 14, 2021 Share Posted January 14, 2021 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. 1 Link to comment Share on other sites More sharing options...
Lichay Posted January 14, 2021 Author Share Posted January 14, 2021 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 More sharing options...
Lichay Posted January 14, 2021 Author Share Posted January 14, 2021 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 More sharing options...
akapowl Posted January 14, 2021 Share Posted January 14, 2021 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. 2 1 Link to comment Share on other sites More sharing options...
Lichay Posted January 14, 2021 Author Share Posted January 14, 2021 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 More sharing options...
akapowl Posted January 14, 2021 Share Posted January 14, 2021 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. 1 Link to comment Share on other sites More sharing options...
Lichay Posted January 14, 2021 Author Share Posted January 14, 2021 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 width: 100vw; and it work perfectly . Thanks you for helping and Good Day Link to comment Share on other sites More sharing options...
akapowl Posted January 14, 2021 Share Posted January 14, 2021 😅 That indeed does the trick - I wouldn't have thought of that in 100 years. Good job! 1 Link to comment Share on other sites More sharing options...
Lichay Posted January 14, 2021 Author Share Posted January 14, 2021 1 hour ago, akapowl said: 😅 That indeed does the trick - I wouldn't have thought of that in 100 years. Good job! lol Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now