G144 · תמונה שנקרעת לשניים וחושפת טקסט

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)}

/* G144 · תמונה שנקרעת לשניים וחושפת טקסט */
.tr{position:relative;height:200vh}
.tr-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;background:var(--ink, #16182b)}
.tr-half{position:absolute;inset:0;will-change:transform}
.tr-half .ph{position:absolute;inset:0;border-radius:0;font-size:0}
.tr-half.l{clip-path:polygon(0 0,50% 0,48% 8%,53% 16%,47% 24%,52% 32%,48% 40%,53% 48%,47% 56%,52% 64%,48% 72%,53% 80%,47% 88%,52% 96%,50% 100%,0 100%)}
.tr-half.r{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,52% 96%,47% 88%,53% 80%,48% 72%,52% 64%,47% 56%,53% 48%,48% 40%,52% 32%,47% 24%,53% 16%,48% 8%)}
.tr-txt{position:relative;text-align:center;color:var(--bg, #f7f7fa);max-width:26ch;padding:24px;opacity:0;scale:.9}
.tr-txt h2{margin:0 0 8px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.tr-txt p{margin:0;opacity:.8}

HTML

<div class="tr">
  <div class="tr-pin">
    <div class="tr-txt"><h2>מה שמאחורי התמונה</h2><p>גלול כדי לקרוע.</p></div>
    <div class="tr-half l"><div class="ph ph-c"></div></div>
    <div class="tr-half r"><div class="ph ph-c"></div></div>
  </div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(".tr-half",{opacity:0});gsap.set(".tr-txt",{opacity:1,scale:1});return;}
  const d=matchMedia("(max-width:767px)").matches?60:100;
  gsap.timeline({scrollTrigger:{trigger:".tr",start:"top top",end:"bottom bottom",scrub:.6}})
    .to(".tr-half.l",{xPercent:-d,rotate:-3,duration:1,ease:"power2.in"},0)
    .to(".tr-half.r",{xPercent:d,rotate:3,duration:1,ease:"power2.in"},0)
    .to(".tr-txt",{opacity:1,scale:1,duration:.6,ease:"power3.out"},.35);
})();