<div class="first h-100vh">
  <p class="scroll-down">
    <span>Scroll Down ↓</span>
  </p>
</div>
<div class="container h-100vh">
  <section class="lightgreen asolute">
    A
  </section>
  <section class="lightblue asolute">B</section>
  <section class="pink asolute">C</section>
  <section class="orange asolute">D</section>
</div>

<div class="h-100vh yellow">
  <section>
    THE END    
  </sction>
</div>

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.text-center {
  text-align: center;
}
span {
  position: sticky;
  top: 20px;
}
.first {
  display: flex;
  justify-content: center;
  align-items: end;
}

.h-100vh {
  height: 100vh;
}
.container {
  overflow: hidden;
  position: relative;
}
.asolute {
  position: absolute;
}
section {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: transparent;
  -webkit-text-stroke: 1px #2e2e2e;
}

.lightgreen {
  background: lightgreen;
}
.lightblue {
  background: lightblue;
}
.pink {
  background: pink;
}
.orange {
  background: orange;
}

.yellow {
  background: yellow;
}

const section1 = document.querySelector('section:nth-child(1)')

const section2 = document.querySelector('section:nth-child(2)')

const section3 = document.querySelector('section:nth-child(3)')

const section4 = document.querySelector('section:nth-child(4)')

const timeline = gsap.timeline({
  scrollTrigger: {
    trigger: '.container',
    // markers: true,
    scrub: true,
    pin: true,
    start: 'top top'
  },
})

timeline
  .from(section1, {
    xPercent: -100,
  })
  .from(section2, {
    xPercent: 100,
  })
  .from(section3, {
    yPercent: -100,
  })
  .from(section4, {
    yPercent: 100,
  })

// timeline
//   .from(section1, {
//     duration: 1,
//     xPercent: -100
//   })
//   .from(section2, {
//     duration: 1,
//     xPercent: 100
//   })
//   .from(section3, {
//     duration: 1,
//     yPercent: -100
//   })
//   .from(section4, {
//     duration: 1,
//     yPercent: 100
//   })