ScrollMagic - Stacking divs

I want to achieve something similar like this example:
https://scrollmagic.io/examples/basic/section_wipes_natural.html

But instead of fixed height divs, here is the idea:
The parent div has lots of child divs with different heights. When you start to scroll down and reach the bottom of the first div (end 1 in the setup below), it sticks to the bottom of the viewport. As you scroll more, the first div is going to stay fixed, then the second starts to dive in and the same thing happens as in the example above.

Here is the setup:
https://codepen.io/22_4/pen/mdWvXWY

Any help would be much appreciated.
Thanks!

So finally i figured it out on my own.

const main = document.querySelector(".main");
const slides = document.querySelectorAll(".slide");

var controller = new ScrollMagic.Controller();

const init = () => {
    slides.forEach((slide, i) => {
        new ScrollMagic.Scene({
            triggerElement: slide,
            triggerHook: 0,
            duration: 0,
            offset: slide.clientHeight - window.innerHeight
        })
            .setPin(slide, { pushFollowers: true })
            .addIndicators()
            .addTo(controller);
    });
};

init();

Code is updated in the pen:
https://codepen.io/22_4/pen/mdWvXWY