G89 · מעבר דרך הכותרת (Zoom Through)

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}

/* G89 · מעבר דרך הכותרת (Zoom Through) */
.zt{position:relative;height:230vh}
.zt-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink, #16182b)}
.zt-scene{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--bg, #f7f7fa);padding:24px}
.zt-scene .ph{position:absolute;inset:0;border-radius:0;opacity:.55;font-size:0}
.zt-scene div{position:relative;max-width:30ch}
.zt-scene h3{margin:0 0 10px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.zt-scene p{margin:0;opacity:.85}
.zt-front{position:absolute;inset:0;width:100%;height:100%}
.zt-front rect{fill:var(--bg, #f7f7fa)}
.zt-front text{font-weight:900;font-size:120px;fill:#000;font-family:inherit}
.zt-hint{position:absolute;bottom:26px;inset-inline:0;text-align:center;font-size:13px;color:var(--muted, #6a6d85)}
@media(max-width:767px){.zt{height:180vh}.zt-front text{font-size:150px}}

HTML

<div class="zt">
  <div class="zt-pin">
    <div class="zt-scene"><div class="ph ph-b"></div><div><h3>ברוכים הבאים פנימה</h3><p>מה שמאחורי השם: שיטה, צוות, ותוצאות שאפשר למדוד.</p></div></div>
    <svg class="zt-front" viewBox="0 0 1000 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <defs><mask id="zt-m"><rect width="1000" height="600" fill="#fff"/><g class="zt-hole"><text x="500" y="345" text-anchor="middle" direction="rtl">סטודיו</text></g></mask></defs>
      <rect width="1000" height="600" mask="url(#zt-m)"/>
    </svg>
    <p class="zt-hint">גלול כדי להיכנס</p>
  </div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(".zt-front",{opacity:0});return;}
  const mob=matchMedia("(max-width:767px)").matches;
  gsap.timeline({scrollTrigger:{trigger:".zt",start:"top top",end:"bottom bottom",scrub:.6}})
    .to(".zt-hole",{scale:mob?26:40,transformOrigin:"50% 50%",ease:"power2.in",duration:1})   // GSAP מתעלם מ-transform-origin של CSS ב-SVG, חייבים לתת לו את המרכז
    .to(".zt-hint",{opacity:0,duration:.1},0)
    .to(".zt-front",{opacity:0,duration:.15},.85);   // בסוף המסע המסכה נעלמת לגמרי, כדי שלא יישאר קצה
})();