G20 · טיימליין אופקי עם קו התקדמות

CSS

/* G20 · טיימליין אופקי עם קו התקדמות */
.hwrap{overflow:hidden;background:var(--bg, #f7f7fa)}
.hcont{display:flex;position:relative;padding-block:130px}
.step{flex:0 0 36vw;display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:20px}
.step .dot{width:18px;height:18px;border-radius:50%;background:#3b5bdb;margin-bottom:14px;position:relative;z-index:2}
.step h3{margin:0 0 6px;font-size:20px}
.step p{margin:0;color:var(--muted, #6a6d85)}
.tline-rail,.tline{position:absolute;top:calc(130px + 8px);inset-inline-start:0;height:2px;width:180vw}
.tline-rail{background:#e6e8f2}
.tline{background:linear-gradient(270deg,#3b5bdb,#22b8cf);transform-origin:100% 50%;will-change:transform}

HTML

<div class="hwrap"><div class="hcont">
<div class="tline-rail"></div><div class="tline"></div>
<div class="step s1"><div class="dot"></div><h3>אפיון</h3><p>מבינים את העסק</p></div>
<div class="step s2"><div class="dot"></div><h3>קופי</h3><p>כותבים את הסיפור</p></div>
<div class="step s3"><div class="dot"></div><h3>עיצוב</h3><p>נותנים לו פנים</p></div>
<div class="step s4"><div class="dot"></div><h3>פיתוח</h3><p>מפיחים חיים</p></div>
<div class="step s5"><div class="dot"></div><h3>השקה</h3><p>עולים לאוויר</p></div>
</div></div>

JS

gsap.registerPlugin(ScrollTrigger);

const steps=gsap.utils.toArray(".step");
const hc=document.querySelector(".hcont");
const rails=[document.querySelector(".tline-rail"),document.querySelector(".tline")];
const total=()=>hc.scrollWidth-innerWidth;

gsap.set(steps.slice(1),{opacity:.22});
gsap.set(".tline",{scaleX:0});

// הכל יושב על טיימליין אחד שמחובר לפין. ScrollTrigger נפרד לכל תחנה,
// שמכוון לאותו אלמנט מפונן, מחשב טווחים על מיקום שמשתנה מתחתיו והשלבים נשארים שקופים.
const tl=gsap.timeline({scrollTrigger:{
  trigger:".hwrap",pin:true,scrub:.5,start:"top top",
  end:()=>"+="+total()*1.6,anticipatePin:1,invalidateOnRefresh:true}});

tl.to([...steps,...rails],{x:()=>total(),ease:"none",duration:1},0)
  .to(".tline",{scaleX:1,ease:"none",duration:1},0);

steps.forEach((el,i)=>{
  if(i===0)return;
  tl.to(el,{opacity:1,ease:"none",duration:.1},i/steps.length*0.9);
});