G136 · שתי תמונות שמתמזגות לאחת

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-l{background:rgba(16,18,43,.72);color:#fff;padding:.18em .7em;border-radius:999px;line-height:1.3;font-size:max(.78em,12px)}

/* G136 · שתי תמונות שמתמזגות לאחת */
.dv{position:relative;height:200vh}
.dv-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.dv-fig{position:relative;width:min(900px,92vw);aspect-ratio:16/9;border-radius:var(--r, 14px);overflow:hidden}
.dv-fig .ph{position:absolute;inset:0;border-radius:0;font-size:24px;will-change:transform,opacity}
.dv-lbl{position:absolute;top:16px;inset-inline-start:16px;background:color-mix(in srgb,var(--bg, #f7f7fa) 92%,transparent);color:var(--ink, #16182b);padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;z-index:2}

HTML

<div class="dv">
  <div class="dv-pin"><div class="dv-fig">
    <div class="ph ph-d dv-after"><span class="ph-l">אחרי</span></div>
    <div class="ph ph-e dv-before"><span class="ph-l">לפני</span></div>
    <span class="dv-lbl">לפני</span>
  </div></div>
</div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const before=document.querySelector(".dv-before"),after=document.querySelector(".dv-after"),lbl=document.querySelector(".dv-lbl");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(before,{opacity:0});lbl.textContent="אחרי";return;}
  gsap.timeline({scrollTrigger:{trigger:".dv",start:"top top",end:"bottom bottom",scrub:.6,onUpdate(s){lbl.textContent=s.progress>.5?"אחרי":"לפני";}}})
    .to(before,{opacity:0,scale:1.12,ease:"power2.inOut",duration:1},0)
    .fromTo(after,{scale:1.08},{scale:1,ease:"power2.inOut",duration:1},0);
})();