G51 · שתי עמודות שנעות בכיוונים הפוכים

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.ph{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:var(--r, 14px)}
.ph-a{background:linear-gradient(160deg,#3b5bdb,#748ffc)}
.ph-b{background:linear-gradient(160deg,#5f3dc4,#9775fa)}
.ph-c{background:linear-gradient(160deg,#0b7285,#3bc9db)}
.ph-d{background:linear-gradient(160deg,#2b8a3e,#69db7c)}
.ph-e{background:linear-gradient(160deg,#e8590c,#ffa94d)}
.ph-f{background:linear-gradient(160deg,#c92a2a,#ff8787)}

/* G51 · שתי עמודות שנעות בכיוונים הפוכים */
.oc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);
  max-width:min(1080px,94vw);margin-inline:auto;align-items:start}
.oc-col{display:grid;gap:clamp(10px,1.4vw,20px);will-change:transform}
.oc-col .ph{aspect-ratio:3/4;font-size:0;border-radius:14px}
.oc-col:nth-child(2) .ph{aspect-ratio:4/5}
.oc-head{text-align:center;max-width:44ch;margin:0 auto clamp(24px,4vw,46px)}
.oc-head h3{font-size:clamp(24px,3.4vw,44px);margin:0 0 10px}
.oc-head p{color:var(--muted, #6a6d85);font-size:17px;line-height:1.8;margin:0}
@media(max-width:700px){.oc{grid-template-columns:1fr 1fr}.oc-col:nth-child(3){display:none}}

HTML

<div class="stage"><div class="oc-head"><h3>קיר העבודות</h3>
  <p>גלול. העמודות נעות בכיוונים הפוכים, והקיר מקבל עומק בלי אנימציה שצועקת.</p></div>
<div class="oc">
  <div class="oc-col"><div class="ph ph-a"></div><div class="ph ph-c"></div><div class="ph ph-d"></div><div class="ph ph-e"></div></div>
  <div class="oc-col"><div class="ph ph-b"></div><div class="ph ph-f"></div><div class="ph ph-a"></div><div class="ph ph-c"></div></div>
  <div class="oc-col"><div class="ph ph-d"></div><div class="ph ph-e"></div><div class="ph ph-b"></div><div class="ph ph-f"></div></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  // רק במסכים שיש בהם מקום לתנועה. במובייל זה מייצר חורים בפריסה
  gsap.matchMedia().add("(min-width: 700px) and (prefers-reduced-motion: no-preference)",()=>{
    const cols=gsap.utils.toArray(".oc-col");
    const tw=cols.map((col,i)=>{
      const dir=i%2?1:-1;                       // אי-זוגית יורדת, זוגית עולה
      return gsap.fromTo(col,{yPercent:6*dir},{yPercent:-6*dir,ease:"none",
        scrollTrigger:{trigger:".oc",start:"top bottom",end:"bottom top",scrub:1.2}});
    });
    return ()=>tw.forEach(t=>{t.scrollTrigger&&t.scrollTrigger.kill();t.kill();});
  });
})();