Layered section scroll animation

[NGrdanjski]

Hi, 

 

I want to animate this three section (red, green & blue), when first(red) section come on top of the browser i want to animate this red section to top, to reveal second section (green). And so one...

I almost solved it, but I wish there was no white space between the sections, when scroll.

 

Animation like this: https://teamway.io/

 

Tnx

See the Pen QWOxyZQ by NGrdanjski (@NGrdanjski) on CodePen.

[elegantseagulls]

The white gap on top is caused by your CSS not matching your gsap transform, if I change your y transform to y: 220, it seems to work as expected. For real world application, you'll want to measure each block and transform that height minus top offset value of the next section.

[NGrdanjski]

Ok. Tnx.

 

Hove i measure each block and transform that height minus top offset value of the next section?