G135 · קו מפריד שמתכופף עם הגלילה

CSS

/* G135 · קו מפריד שמתכופף עם הגלילה */
.bd-sec{min-height:60vh;display:grid;place-items:center;text-align:center;padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px))}
.bd-sec h2{margin:0 0 8px;font-size:var(--fs-h2, clamp(28px, 1.9vw + 0.5rem, 52px))}
.bd-sec p{margin:0;color:var(--muted, #6a6d85)}
.bd{display:block;width:100%;height:80px;overflow:visible}
.bd path{fill:none;stroke:var(--ink, #16182b);stroke-width:2;stroke-linecap:round;stroke-dasharray:1010;stroke-dashoffset:1010}

HTML

<section class="bd-sec"><div><h2>סקשן ראשון</h2><p>גלול מהר ותראה את הקו מתכופף.</p></div></section>
<svg class="bd" viewBox="0 0 1000 80" preserveAspectRatio="none" aria-hidden="true"><path d="M0 40 Q 500 40 1000 40"/></svg>
<section class="bd-sec"><div><h2>סקשן שני</h2><p>הקו חוזר להיות ישר כשעוצרים.</p></div></section>
<svg class="bd" viewBox="0 0 1000 80" preserveAspectRatio="none" aria-hidden="true"><path d="M0 40 Q 500 40 1000 40"/></svg>
<section class="bd-sec"><div><h2>סקשן שלישי</h2><p>אותו קו, בכל מפריד בעמוד.</p></div></section>

JS

gsap.registerPlugin(ScrollTrigger);

(function(){
  const paths=gsap.utils.toArray(".bd path");
  if(matchMedia("(prefers-reduced-motion: reduce)").matches){gsap.set(paths,{strokeDashoffset:0});return;}
  paths.forEach(p=>gsap.to(p,{strokeDashoffset:0,ease:"none",scrollTrigger:{trigger:p,start:"top 95%",end:"top 55%",scrub:.4}}));   // הקו נמתח כשנכנס
  const K=matchMedia("(max-width:767px)").matches?.05:.1,LIM=60;
  const o={y:40},set=()=>paths.forEach(p=>p.setAttribute("d","M0 40 Q 500 "+o.y+" 1000 40"));
  const bend=gsap.quickTo(o,"y",{duration:.9,ease:"elastic.out(1,.35)",onUpdate:set});
  ScrollTrigger.create({onUpdate:s=>{bend(40+gsap.utils.clamp(-LIM,LIM,s.getVelocity()*K));}});
  let t;addEventListener("scroll",()=>{clearTimeout(t);t=setTimeout(()=>bend(40),100);},{passive:true});
})();