G71 · שתי תמונות שמחליפות מקומות בגלילה

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)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}

/* G71 · שתי תמונות שמחליפות מקומות בגלילה */
.sx{height:260vh;position:relative}
.sx-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.sx-pair{position:relative;width:min(860px,92vw);aspect-ratio:16/9}
.sx-img{position:absolute;top:50%;width:52%;aspect-ratio:4/5;border-radius:18px;font-size:0;
  margin-top:-26%;will-change:transform;box-shadow:0 24px 60px rgba(20,20,40,.2)}
.sx-a{right:0;z-index:2}
.sx-b{left:0;z-index:1}
.sx-tag{position:absolute;bottom:-34px;inset-inline:0;text-align:center;font-size:14px;color:var(--muted, #6a6d85)}
.sx-cap{position:absolute;bottom:8vh;inset-inline:0;text-align:center;color:var(--muted, #6a6d85);font-size:15px}

HTML

<div class="sx"><div class="sx-stage">
  <div class="sx-pair">
    <div class="ph sx-img sx-a ph-b"><span class="sx-tag">אפשרות א</span></div>
    <div class="ph sx-img sx-b ph-d"><span class="sx-tag">אפשרות ב</span></div>
  </div>
  <p class="sx-cap">גלול. השתיים מחליפות צדדים, וזו שמלפנים גדלה.</p>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const a=document.querySelector(".sx-a"),b=document.querySelector(".sx-b");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce)return;
  const tl=gsap.timeline({scrollTrigger:{trigger:".sx",start:"top top",end:"bottom bottom",scrub:.6}});
  // התנועה באחוזים של האלמנט עצמו, ולכן היא מדויקת בכל רוחב מסך
  tl.fromTo(a,{xPercent:0,scale:1,zIndex:2},{xPercent:-92,scale:.86,ease:"power1.inOut"},0)
    .fromTo(b,{xPercent:0,scale:.86,zIndex:1},{xPercent:92,scale:1,ease:"power1.inOut"},0)
    // החלפת השכבות קורית באמצע הדרך, בדיוק כשהן חופפות
    .set(a,{zIndex:1},.5)
    .set(b,{zIndex:2},.5);
})();