<div id="container">   
<div class="description panel">
    <div><h1>Layered pinning from bottom</h1>
      <p>A simple example where overlapping panels reveal from the bottom.</p>
      <div class="scroll-down">Scroll down<div class="arrow"></div></div>
    </div>
  </div>


  <section class="panel green">
    <h2>
      1
    </h2>
  </section>
  <section class="panel solid">
    <h2>
      2
    </h2>
  </section>
  <section class="panel purple">
    <h2>
      3
    </h2>
  </section>

</div>

#container {
  width: 100%;
  height: 100%; 
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.panel {
  position: absolute;
  will-change: transform;
}

h2 {
  font-size: 30vw;
  opacity: 0.2
}

gsap.registerPlugin(ScrollTrigger);

gsap.to(".panel:not(:last-child)", {
  yPercent: -100, 
  ease: "none",
  stagger: 0.5,
  scrollTrigger: {
    trigger: "#container",
    start: "top top",
    end: "+=300%",
    scrub: true,
    pin: true
  }
});


gsap.set(".panel", {zIndex: (i, target, targets) => targets.length - i});