Scroll to slide in full page

I’m looking to have each of the full-page sections slide in and out on scroll as seen here on this page
The background should be sort of pinned, as the next page slides in over it.
Scroll should only trigger the slide in, and you cannot continuously scroll or scroll until the next slide is in full view.

How will I achieve that?

Below is my page so far

gsap.registerPlugin(ScrollTrigger)

gsap.utils.toArray("section").forEach((section, i) => {
  ScrollTrigger.create({
    trigger: section,
    start: "top top",
    pin: true,
    pinSpacing: false,
  })
})
::-webkit-scrollbar{
  display: none;
}
html,
body{
  margin: 0;
}
section {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
h1 {
  font-size: 40px;
  color: black;
  background-color: #f1f1f1a2;
  padding: 20px
}
<section style="background-image:url(https://i.postimg.cc/D0KBrP1f/bmw.jpg);">
  <h1>FIRST</h1>
</section>
<section style="background-image: url(https://i.postimg.cc/hGfycjSn/beatle.jpg);">
  <h1>SECOND</h1>

</section>
<section  style="background-image:url(https://i.postimg.cc/NjNJ3Tvb/retrocar1.jpg);">
  <h1>THIRD</h1>
</section>
<section style="background-image:url(https://i.postimg.cc/RCfYWNwV/hot.jpg);">
  <h1>FOURTH</h1>
</section>
<section style="background-image:url(https://i.postimg.cc/6p6bbcgy/tvretro.jpg);">
  <h1>FIFTH</h1>
</section>