G108 · שורות כותרת שנפתחות ומגלות תמונה

CSS

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

/* G108 · שורות כותרת שנפתחות ומגלות תמונה */
.sp2{position:relative;height:220vh}
.sp2-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.sp2-stack{display:grid;justify-items:center;text-align:center;width:100%}
.sp2-l{font-size:clamp(34px,7vw,110px);font-weight:900;line-height:1;margin:0;will-change:transform}
.sp2-img{width:min(1100px,94vw);height:min(46vh,470px);border-radius:var(--r, 14px);overflow:hidden;transform:scaleY(0);transform-origin:50% 50%;will-change:transform}
.sp2-img .ph{width:100%;height:100%;border-radius:0;font-size:0}
.sp2-cap{position:absolute;bottom:4vh;inset-inline:0;text-align:center;color:var(--muted, #6a6d85);opacity:0}
@media(max-width:767px){.sp2-img{height:34vh}}

HTML

<div class="sp2">
  <div class="sp2-pin"><div class="sp2-stack">
    <h2 class="sp2-l">בונים מקומות</h2>
    <div class="sp2-img"><div class="ph ph-c"></div></div>
    <h2 class="sp2-l">שאנשים חוזרים אליהם</h2>
  </div><p class="sp2-cap">סטודיו לאדריכלות, מאז 2011</p></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const img=document.querySelector(".sp2-img"),lines=gsap.utils.toArray(".sp2-l");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(img,{scaleY:1});gsap.set(".sp2-cap",{opacity:1});return;}
  const mob=matchMedia("(max-width:767px)").matches;
  // התמונה תופסת מקום בגריד גם כשהיא scaleY(0), ולכן השורות מתחילות צמודות דרך y ונפתחות ל-0
  gsap.set(lines[0],{y:()=>img.offsetHeight/2});gsap.set(lines[1],{y:()=>-img.offsetHeight/2});
  gsap.timeline({scrollTrigger:{trigger:".sp2",start:"top top",end:"bottom bottom",scrub:.6,invalidateOnRefresh:true}})
    .to(lines,{y:0,duration:1,ease:"power3.inOut"},0)
    .fromTo(img,{scaleY:0},{scaleY:1,duration:1,ease:"power3.inOut"},0)
    .to(lines,{scale:mob?.92:.86,duration:.4,ease:"power2.out"},.7)
    .to(".sp2-cap",{opacity:1,duration:.3},.8);
})();