<div class="item" style="background: #0FC2C0;">1</div>
<div class="wrapper">
  <div class="container">
    <div class="item js-item" style="background: #0CABA8;">2</div>
    <div class="item js-item" style="background: #008F8C;">3</div>
    <div class="item js-item" style="background: #015958;">4</div>
  </div>
</div>
<div class="item" style="background: #0FC2C0;">5</div>
.wrapper{
  overflow: hidden;
}
.container {
  display: flex;
}
.item {
  height: 100vh;
  display: grid;
  place-items: center;
  font-size: 40px;
  color: #fff;
}

const container = document.querySelectorAll(".container");
const items = document.querySelectorAll(".js-item");

gsap.set(container,{
  width: items.length * 100 + "%"
});
gsap.set(items,{
  width: 100 / items.length + "%"
});

gsap.to(".js-item", {
  xPercent: -100 * (items.length - 1),
  scrollTrigger: {
    trigger: container,
    start: "top top",
    end: container.clientWidth,
    pin: true,
    anticipatePin: 1,
    scrub: true,
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js