White space between sections with parallax

[Insecure]

Hello everyone

I've been trying to create a parallax effect with sections on my page.
It works to some extent when I scroll, the section above uncovers the section below.
But then suddenly, as I keep scrolling down, it breaks and I'm left with white space between my sections.
There are no margins or padding on these containers and I can't quite figure out what is causing this.

Can anyone tell me how to avoid and fix this? Thanks!

Here are my screenshots so you can see what I'm talking about:

 

[Insecure]

So, to answer my question, in case someone else in future stumbles across it:

The problem was that I was applying scrolling effect on a whole section that contained both one container with the background image and another container with text.

Don't do this, or you'll end up with white space and unresponsive design. Instead, apply scrolling effects only on the container which contains the background image. When you upload the background image, you'll have options to use the image as cover, set the background to don't repeat etc. Under these options, you'll find the scrolling effects option and enable it there. You're good to go! No white space and everything runs well.

So, TLDR: Don't apply scroll effects on the whole section, but only on a container that contains the background image you want to have parallax effect.

Bonus tip: use parallax effect combined with LENIS library for smooth scroll and you'll reap all the benefits of the parallax

 

[Insecure]

Also, in case you want to apply parallax effect on a container with a video background in Elementor, I've spent hours tinkering around and the solution is this:

Make sure you have following DOM structure:
Wrapper > Section > Container & Container

- Wrapper container will have content width set to boxed and for my web, I set the max-width to 1920px. Also it has flexbox direction set to column, with justify-content and align-items set to center.
- Section container will have full width, width set 100% no height set at all. Also flexbox set to direction row, justify-content: center and align-items center.
- Child containers were set to content width: full width, width 50% each, height: 100vh, flexbox set to column and justify-content and align-items set to center.

Now my layout is two columns of the same height, where one of them has a video with a parallax effect and another one has some text with a paragraph. That's why I needed 2 inner containers with 50% width.

Let's say my left container has some text and a heading inside of it, while my right container will have a video with parallax. Go to the right container, go to style and apply a video background to it. Next go to advanced, go to motion effects, enable scrolling effects and vertical scroll. Set the scroll direction to down and speed to 7 (I think the default value is 4).

Right, after you do this, you will notice your video is overflowing the container, leaving white space above or underneath it. Go to Layout -> Additional options and set the overflow to auto.
One last thing to do is go to its parent container, which in our case is Section and set its overflow to hidden.

That's it. You should see your video background fitting perfectly inside of its container, while also having the parallax effect when you scroll.