Section parallax without whitespace

[Afplaktape]

I have different pages with a lot of sections (between 5 and 12) and I want to add a parallax to them but while doing so, it obviously creates a lot of whitespace the further I scroll down. Is there a way to do this without the whitespace being added? I just want to keep page intact as build without the parallax

See the Pen xxNPrZw by Afplaktape (@Afplaktape) on CodePen

[Rodrigo]

Hi,

 

Mhhh.... I'm not sure how that can be done without some amount of custom logic. The thing is that you're moving the elements on the Y axis so that inevitably will create separation between them.

 

The simplest way I can think to solve this is to move each section inside a wrapper that doesn't move. I forked your demo and made some changes to it:

See the Pen YzbEvKo by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Afplaktape]

Thanks for your reply! Unfortunately this isn't really what I'm looking for since the sections don't have a determined height... Maybe I just have to accept that it's not doable to create this effect. Have a nice weekend:)

[Rodrigo]

Hi

 

Actually my demo works by adding a specific amount of pixels to the height of each section, so before doing that you can set the height of each section parent to the height of the section, without that offset amount. This should work regardless the natural height of each section. This because I'm using relative values here 

gsap.set(section, {
  height: "+=" + offset
});

That adds the offset value toe the height of the section, as I mentioned before.

 

Hopefully this clears things up 

Happy Tweening!