<section class="section01">
<h1>section01</h1>
</section>
<section class="section02">
<h1>section02</h1>
</section>
<section class="section03">
<h1>section03</h1>
</section>
<section class="section04">
<h1>section04</h1>
</section>
<section class="section05">
<h1>section05</h1>
</section>html, body { height: 100%; margin: 0; }
section { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
.section01 { background: orange; width: 100%; height: 100%; }
.section02 { background: yellowgreen; }
.section03 { background: firebrick; }
.section04 { background: cornflowerblue; }
.section05 { background: seagreen; }gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray("section").forEach((section, i) => {
ScrollTrigger.create({
trigger: section,
start: "top top",
pin: true,
pinSpacing: false,
});
});
ScrollTrigger.create({
snap: 1 / 4
});
External CSS
This Pen doesn't use any external CSS resources.