G04 · טקסט נחשף בגלילה: שלוש רמות

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.center{text-align:center}

/* G04 · טקסט נחשף בגלילה: שלוש רמות */
.tstage h2{font-size:var(--fs-demo, clamp(36px, 3vw + 0.5rem, 76px));line-height:1.2;max-width:22ch;margin:0 auto clamp(120px,14vw,260px)}

HTML

<div class="stage tight tstage center">
<h2 class="t-clip">רמה א: המילים עולות מתוך מסכה, מילה אחרי מילה, בקצב הגלילה</h2>
<h2 class="t-fade">רמה ב: המילים מתבהרות בעדינות משקיפות חלקית אל מלאה</h2>
<h2 class="t-wipe">רמה ג: הכותרת כולה נמחקת ונחשפת מהצד בתנועה אחת</h2>
</div>

JS

gsap.registerPlugin(ScrollTrigger, SplitText);

document.querySelectorAll(".t-clip").forEach(h=>{
  const s=new SplitText(h,{type:"lines, words"});
  gsap.from(s.words,{clipPath:"inset(100% 0% 0% 0%)",opacity:0,stagger:.5,
    scrollTrigger:{trigger:h,start:"top 80%",end:"top 30%",scrub:1}});
});
document.querySelectorAll(".t-fade").forEach(h=>{
  const s=new SplitText(h,{type:"lines, words"});
  gsap.from(s.words,{opacity:.15,stagger:.5,scrollTrigger:{trigger:h,start:"top 80%",end:"top 30%",scrub:1}});
});
document.querySelectorAll(".t-wipe").forEach(h=>{
  gsap.from(h,{clipPath:"inset(0% 0% 0% 100%)",ease:"power4.out",
    scrollTrigger:{trigger:h,start:"top 70%",end:"top 40%",scrub:1}});
});