G13 · Batch Reveal לגרידים

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}

/* G13 · Batch Reveal לגרידים */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap, clamp(16px, 1.6vw, 36px));padding-inline:var(--gutter, clamp(24px, 5vw, 96px))}
.bcard{height:130px;background:var(--card, #fff);border:1px solid var(--line, #e4e4ee);border-radius:var(--r, 14px);display:flex;align-items:center;justify-content:center;font-weight:500}
@media(max-width:767px){.bgrid{grid-template-columns:1fr 1fr}}

HTML

<div class="stage tight"><div class="bgrid">
<div class="bcard">01</div><div class="bcard">02</div><div class="bcard">03</div>
<div class="bcard">04</div><div class="bcard">05</div><div class="bcard">06</div>
<div class="bcard">07</div><div class="bcard">08</div><div class="bcard">09</div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

gsap.set(".bcard",{y:24,opacity:0});
ScrollTrigger.batch(".bcard",{start:"top 88%",once:true,
  onEnter:b=>gsap.to(b,{y:0,opacity:1,stagger:.08,duration:.5,ease:"power2.out"})});