<div class="container">
  <div class="description panel blue">
    <div>
      <h1>Layered pinning</h1>
      <p>Use pinning to layer panels on top of each other as you scroll.</p>
      <div class="scroll-down">Scroll down<div class="arrow"></div>
      </div>
    </div>
  </div>

  <section class="panel red">
    ONE
  </section>
  <section class="panel orange">
    TWO
  </section>
  <section class="panel purple">
    THREE
  </section>
  <section class="panel green">
    FOUR
  </section>
</div>

<header>
  <a href="https://greensock.com/scrolltrigger">
    <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
  </a>
</header>

.container {
  height: 100vh;
  position: relative;
}

.panel:not(:first-child) {
  position: absolute;
  top: 100vh;
  width: 100%;
}

gsap.registerPlugin(ScrollTrigger);

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".container",
    pin: true,
    scrub: true,
    end: "+=500%",
    markers: true
  }
});

let panels = gsap.utils.toArray(".panel");

panels.forEach((panel, i) => {
  
  if (!i) {
    tl.set({}, {}, 0.5)
  } else {
    tl.to(panel, {
      yPercent: -100,
      ease: "none"
    }, "+=1")
  }
})