G109 · כותרת שמתפרקת לעומקים

CSS

/* G109 · כותרת שמתפרקת לעומקים */
.dp{min-height:120vh;display:grid;place-items:center;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.dp h2{font-size:clamp(34px,7vw,110px);line-height:1.1;margin:0;text-align:center;font-weight:900;max-width:14ch}
.dp .w{display:inline-block;margin-inline:.14em;will-change:transform}
.dp .w.ac{color:var(--accent, #4a3aff)}

HTML

<div class="dp"><h2><span class="w" data-depth="1.4">אתרים</span> <span class="w" data-depth="-.8">שנבנים</span> <span class="w ac" data-depth="2">סביב</span> <span class="w" data-depth="-1.6">פעולה</span> <span class="w" data-depth=".6">אחת</span></h2></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const words=gsap.utils.toArray(".dp .w");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  const k=matchMedia("(max-width:767px)").matches?24:60;
  words.forEach(w=>{const d=+w.dataset.depth||1;
    // מ-y חיובי ל-y שלילי דרך אפס באמצע הסקשן: המילים נפגשות לשורה אחת בדיוק כשהכותרת במרכז
    gsap.fromTo(w,{y:d*k*1.6},{y:-d*k*1.6,ease:"none",scrollTrigger:{trigger:".dp",start:"top bottom",end:"bottom top",scrub:.5}});
  });
})();