G22 · עיגול תהליך נצבע בגלילה

CSS

/* G22 · עיגול תהליך נצבע בגלילה */
.pw{height:100vh;display:flex;align-items:center;justify-content:center;position:relative}
.pstage{position:relative;width:min(540px,72vw);aspect-ratio:1}
.pcirc{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pcirc .track{fill:none;stroke:#e2e2e2;stroke-width:2}
.pcirc .draw{fill:none;stroke:url(#pg);stroke-width:4;stroke-linecap:round}
.pdot{position:absolute;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#e8590c,#c2255c);filter:grayscale(1) brightness(1.7);transform:translate(-50%,-50%)}
.pstep{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;padding:12%}
.pstep h3{font-size:clamp(22px,1.8vw,36px);margin:8px 0}
.pstep p{color:var(--muted, #6a6d85);max-width:34ch;margin:0}
.pstep .num{font-size:clamp(40px,3.5vw,80px);font-weight:700;color:transparent;-webkit-text-stroke:1.5px #c2255c;line-height:1}
.pstep.p1{opacity:1}

HTML

<div class="pw"><div class="pstage">
<svg class="pcirc" viewBox="0 0 600 600">
<defs><linearGradient id="pg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#e8590c"/><stop offset="1" stop-color="#c2255c"/></linearGradient></defs>
<circle class="track" cx="300" cy="300" r="290"/><circle class="draw" cx="300" cy="300" r="290"/>
</svg>
<div class="pdot d1" style="top:1.5%;left:50%;filter:none"></div>
<div class="pdot d2" style="top:50%;left:98.5%"></div>
<div class="pdot d3" style="top:98.5%;left:50%"></div>
<div class="pdot d4" style="top:50%;left:1.5%"></div>
<div class="pstep p1"><span class="num">01</span><h3>איפיון האתגרים</h3><p>בשיחה ראשונית נכיר אתכם ונבין את הצרכים.</p></div>
<div class="pstep p2"><span class="num">02</span><h3>תכנון הפתרון</h3><p>בונים תהליך שמתאים לארגון ולפעילות.</p></div>
<div class="pstep p3"><span class="num">03</span><h3>הטמעה מלאה</h3><p>מלווים את הצוות עד שהמערכת עובדת לבד.</p></div>
<div class="pstep p4"><span class="num">04</span><h3>צמיחה</h3><p>מודדים, מדייקים וממשיכים קדימה.</p></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin);

gsap.set(".pcirc .draw",{drawSVG:"0% 0%"});
const ptl=gsap.timeline({scrollTrigger:{trigger:".pw",start:"top top",end:"+=2000",scrub:true,pin:true,anticipatePin:1}});
const STEPS=4;
for(let i=1;i<STEPS;i++){
  ptl.to(".pcirc .draw",{drawSVG:"0% "+(i*100/STEPS)+"%",duration:2})
     .to(".d"+(i+1),{filter:"grayscale(0) brightness(1)",duration:.1})
     .to(".p"+(i+1),{opacity:1,duration:.1},"<")
     .to(".p"+i,{opacity:0,duration:.1},"<");
}
ptl.to(".pcirc .draw",{drawSVG:"0% 100%",duration:2});