<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,
}
});
This Pen doesn't use any external CSS resources.