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>