Progress Line Draws

<!-- Progress Line Draws · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

<div class="jouw-container">
<div class="pld"><svg class="pld-svg" viewBox="0 0 400 200" preserveAspectRatio="none"><path class="pld-path" d="M10 180 C 120 180 100 40 200 40 S 300 180 390 30" fill="none" stroke="#F5480F" stroke-width="4" stroke-linecap="round"/></svg></div>
</div>

/* Progress Line Draws · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.pld{position:absolute;inset:0;background:#0a0a0a;display:flex;align-items:center;justify-content:center}.pld-svg{width:80%;height:70%}.pld-path{stroke-dasharray:1;stroke-dashoffset:1}

// Progress Line Draws · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.pld')||root;var path=root.querySelector('.pld-path');var len=path.getTotalLength();path.style.strokeDasharray=len;path.style.strokeDashoffset=len;var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce){path.style.strokeDashoffset=0;return;}if(!window.gsap||!window.ScrollTrigger){path.style.transition='stroke-dashoffset 1s ease';path.style.strokeDashoffset=0;return;}gsap.to(path,{strokeDashoffset:0,ease:'none',scrollTrigger:{trigger:root,start:'top 80%',end:'bottom 40%',scrub:true}});
}
init(document.querySelector('.jouw-container'));