ScrollMagic – Stacking divs

  css, javascript, scrollmagic

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!

Source: Ask Javascript Questions

LEAVE A COMMENT