G62 · לפני ואחרי שנחשף בגלילה

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

/* G62 · לפני ואחרי שנחשף בגלילה */
.ba2{height:280vh;position:relative}
.ba2-stick{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.ba2-frame{position:relative;width:min(900px,92vw);aspect-ratio:16/10;border-radius:var(--r, 14px);overflow:hidden;
  border:1px solid var(--line, #e4e4ee)}
.ba2-layer{position:absolute;inset:0;border-radius:0;font-size:0}
/* השכבה העליונה היא "לפני", והיא נחתכת מימין לשמאל, בכיוון הקריאה בעברית */
.ba2-before{clip-path:inset(0 0 0 0)}
.ba2-tag{position:absolute;top:16px;z-index:3;background:rgba(0,0,0,.62);color:#fff;font-size:13px;
  padding:6px 14px;border-radius:999px;backdrop-filter:blur(6px)}
.ba2-tag.is-before{right:16px}
.ba2-tag.is-after{left:16px}
/* הקו מתחיל שקוף: לפני שהגלילה נכנסת לטווח הוא היה נראה כפס לבן דבוק לקצה */
.ba2-edge{position:absolute;top:0;bottom:0;width:2px;background:#fff /* qa-allow: white, ידית/סמן ולא משטח טקסט */;z-index:4;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);left:0;opacity:0}
.ba2-cap{position:absolute;bottom:8vh;inset-inline:0;text-align:center;color:var(--muted, #6a6d85);font-size:15px}

HTML

<div class="ba2"><div class="ba2-stick">
  <div class="ba2-frame">
    <div class="ph ba2-layer ba2-after ph-d"></div>
    <div class="ph ba2-layer ba2-before ph-b"></div>
    <span class="ba2-tag is-before">לפני</span>
    <span class="ba2-tag is-after">אחרי</span>
    <i class="ba2-edge"></i>
  </div>
  <p class="ba2-cap">גלול. קו החשיפה נע מימין לשמאל.</p>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const before=document.querySelector(".ba2-before"),edge=document.querySelector(".ba2-edge"),
        frame=document.querySelector(".ba2-frame");
  const reduce=matchMedia("(prefers-reduced-motion: reduce)").matches;
  if(reduce){before.style.clipPath="inset(0 0 0 50%)";edge.style.left="50%";return;}
  const state={p:0};
  ScrollTrigger.create({
    trigger:".ba2",start:"top top",end:"bottom bottom",scrub:.5,
    onUpdate:self=>{
      // p הוא כמה נחשף מ"אחרי". החיתוך משמאל מותיר את "לפני" בימין
      const p=self.progress;
      before.style.clipPath="inset(0 0 0 "+(p*100).toFixed(2)+"%)";
      edge.style.left=(p*100).toFixed(2)+"%";
      edge.style.opacity=p>0.002&&p<0.998?1:0;
    }
  });
})();