G30 · סקשנים ננעלים עם Snap

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* G30 · סקשנים ננעלים עם Snap */
.snapw{overflow:hidden;transition:all 0s !important}
.snapc{display:flex;width:300vw}
.snapp{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px));font-weight:700;color:#fff}

HTML

<div class="snapw"><div class="snapc">
<div class="snapp ph-a ph"><span class="ph-l">פרק ראשון</span></div>
<div class="snapp ph-b ph"><span class="ph-l">פרק שני</span></div>
<div class="snapp ph-c ph"><span class="ph-l">פרק שלישי</span></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

// עמוד עברי: הרצועה מתחילה מהקצה הימני והגלישה יוצאת שמאלה, ולכן x חיובי.
// המצלמה נעה שמאלה בתוך התוכן, בדיוק ככיוון הקריאה. באתר אנגלי מוסיפים מינוס.
gsap.to(".snapc",{x:()=>document.querySelector(".snapc").scrollWidth-innerWidth,ease:"none",
  scrollTrigger:{trigger:".snapw",start:"top top",end:"+=2400",scrub:.6,pin:true,anticipatePin:1,
    invalidateOnRefresh:true,snap:{snapTo:1/2,duration:.4,ease:"power1.inOut"}}});