ScrollMagic - Stacking divs

Question

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!

You might consider using [ScrollTrigger](https://greensock.com/scrolltrigger/) instead. It's better in every way. — Zach Saucier, Jun 17 '21 at 14:19
I actually just finished a project using ScrollMagic so maybe i can help in some way. Im not sure what the problem is you're having though? it seems to work fine? — Halp_am_stuck1, Jun 18 '21 at 02:21

score 0 · Accepted Answer · answered Jun 19 '21 at 11:34

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

ScrollMagic - Stacking divs

1 Answers1