<section class="demo">
<svg class="demo__svg" viewBox="0 0 640 280" fill="none" aria-hidden="true">
<path id="draw" d="M40 180C110 60 170 240 250 120C320 20 360 230 430 140C500 50 560 190 600 110" />
</svg>
<p>Trace the line as you move.</p>
</section>.demo {
min-height: 180vh;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
padding: 18vh 24px;
background: #08080a;
color: #5a5a62;
font-family: "Helvetica Neue", system-ui, sans-serif;
}
.demo__svg { width: min(640px, 100%); }
#draw {
stroke: #f4f4f2;
stroke-width: 1.6;
stroke-linecap: round;
fill: none;
}
.demo p {
margin: 0;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
}const path = document.querySelector("#draw");
const length = path.getTotalLength();
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
gsap.set(path, { strokeDasharray: length, strokeDashoffset: reduce ? 0 : length });
if (!reduce && window.ScrollTrigger) {
gsap.to(path, {
strokeDashoffset: 0,
ease: "none",
scrollTrigger: {
trigger: ".demo",
start: "top 80%",
end: "center 35%",
scrub: 0.5,
},
});
}
