G124 · טבלת השוואה שמתמלאת בגלילה

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}

/* G124 · טבלת השוואה שמתמלאת בגלילה */
.cmp{max-width:min(860px,94vw);margin-inline:auto;border:1px solid var(--line, #e4e4ee);border-radius:var(--r, 14px);overflow:hidden;background:var(--card, #fff)}
.cmp-row{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:center;border-bottom:1px solid var(--line, #e4e4ee);opacity:.35;translate:0 10px}
.cmp-row:last-child{border-bottom:0}
.cmp-row.head{opacity:1;translate:0;background:var(--bg, #f7f7fa);font-size:13px;color:var(--muted, #6a6d85);letter-spacing:.06em}
.cmp-row>div{padding:clamp(12px,1.6vw,20px)}
.cmp-row .us{background:color-mix(in srgb,var(--accent, #4a3aff) 7%,transparent);text-align:center}
.cmp-row .them{text-align:center;color:var(--muted, #6a6d85)}
.cmp-row b{font-size:clamp(15px,1.5vw,18px)}
.cmp svg{width:26px;height:26px;overflow:visible;vertical-align:middle}
.cmp .ok path{fill:none;stroke:var(--accent, #4a3aff);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cmp .no path{fill:none;stroke:var(--muted, #6a6d85);stroke-width:2.5;stroke-linecap:round}
@media(max-width:767px){.cmp-row{grid-template-columns:1.3fr 1fr 1fr}.cmp-row b{font-size:14px}.cmp svg{width:20px;height:20px}}

HTML

<div class="stage"><div class="cmp">
  <div class="cmp-row head"><div>מה מקבלים</div><div class="us">אצלנו</div><div class="them">בדרך הישנה</div></div>
  <div class="cmp-row"><div><b>אפיון לפני עיצוב</b></div><div class="us"><svg class="ok" viewBox="0 0 24 24"><path d="M4 13l5 5 11-12"/></svg></div><div class="them"><svg class="no" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div>
  <div class="cmp-row"><div><b>קופי שנכתב לגולש</b></div><div class="us"><svg class="ok" viewBox="0 0 24 24"><path d="M4 13l5 5 11-12"/></svg></div><div class="them"><svg class="no" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div>
  <div class="cmp-row"><div><b>מובייל קודם</b></div><div class="us"><svg class="ok" viewBox="0 0 24 24"><path d="M4 13l5 5 11-12"/></svg></div><div class="them"><svg class="no" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div>
  <div class="cmp-row"><div><b>מדידה מהיום הראשון</b></div><div class="us"><svg class="ok" viewBox="0 0 24 24"><path d="M4 13l5 5 11-12"/></svg></div><div class="them"><svg class="no" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div>
  <div class="cmp-row"><div><b>עלייה תוך שבועיים</b></div><div class="us"><svg class="ok" viewBox="0 0 24 24"><path d="M4 13l5 5 11-12"/></svg></div><div class="them"><svg class="no" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg></div></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin);

(function(){
  const rows=gsap.utils.toArray(".cmp-row:not(.head)");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(rows,{opacity:1,translate:"0 0"});return;}
  gsap.set(".cmp .ok path",{drawSVG:"0%"});
  ScrollTrigger.batch(rows,{start:"top 85%",once:true,onEnter:batch=>{
    batch.forEach((row,i)=>{
      gsap.timeline({delay:i*.12})
        .to(row,{opacity:1,translate:"0 0",duration:.45,ease:"power3.out"})
        .to(row.querySelector(".ok path"),{drawSVG:"100%",duration:.4,ease:"power2.inOut"},"-=.2")
        .to(row.querySelector(".no"),{opacity:.35,scale:.85,duration:.3},"-=.3");
    });
  }});
})();