G86 · אייקוני קו שמציירים את עצמם בכניסה

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}

/* G86 · אייקוני קו שמציירים את עצמם בכניסה */
.ic{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap, clamp(16px, 1.6vw, 36px));max-width:1000px;margin-inline:auto}
.ic-it{text-align:center;padding:26px 18px}
.ic-it svg{width:64px;height:64px;fill:none;stroke:var(--accent, #4a3aff);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.ic-it h3{margin:0 0 6px;font-size:19px}
.ic-it p{margin:0;color:var(--muted, #6a6d85);font-size:15px;line-height:1.6}
@media(max-width:767px){.ic{grid-template-columns:1fr}}

HTML

<div class="stage"><div class="ic">
  <div class="ic-it"><svg viewBox="0 0 48 48"><path d="M8 34l10-10 8 8 14-16"/><path d="M30 16h10v10"/></svg><h3>תוצאות שנמדדות</h3><p>כל פנייה נספרת מהיום הראשון.</p></div>
  <div class="ic-it"><svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="16"/><path d="M24 14v10l7 4"/></svg><h3>עולה תוך שבועיים</h3><p>אפיון, עיצוב, בנייה. בלי סחבת.</p></div>
  <div class="ic-it"><svg viewBox="0 0 48 48"><path d="M24 6l14 6v10c0 9-6 16-14 20-8-4-14-11-14-20V12z"/><path d="M17 24l5 5 9-10"/></svg><h3>מאובטח ומגובה</h3><p>SSL, גיבוי יומי, ועדכונים שוטפים.</p></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin);

(function(){
  const items=gsap.utils.toArray(".ic-it");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches)return;
  gsap.set(".ic-it svg path, .ic-it svg circle",{drawSVG:"0%"});
  gsap.set(".ic-it h3, .ic-it p",{opacity:0,y:14});
  ScrollTrigger.batch(items,{start:"top 80%",once:true,onEnter:batch=>{
    const tl=gsap.timeline();
    batch.forEach((it,i)=>{
      tl.to(it.querySelectorAll("svg path, svg circle"),{drawSVG:"100%",duration:.9,ease:"power2.inOut",stagger:.15},i*.15)
        .to(it.querySelectorAll("h3, p"),{opacity:1,y:0,duration:.5,ease:"power3.out",stagger:.08},i*.15+.5);
    });
  }});
})();