(SVG - stroke-dsaharray) my path divides into two pathes when i start animation

Question

I'm trying to animate SVG on scroll, i've created the SVG path my self using math, and it's showing as what i need exactly, but the problem started when i tried to add effect on path using CSS stroke-dasharray

my problem is : the animation starts from two points, one from the start, and the other after the q command, as long as i used move command twice, one at the start and one after q curve command.

i tried to fix this all the way, but it changes the drawn SVG totally.

here is a snippet to explain more how it works with me,

const shape = document.querySelector('#shape');
window.addEventListener('scroll', slide);
function slide() {
     let value = 2000 - scrollY*4; 
shape.style.strokeDashoffset=  value;
}

body {
    background:black;
    -webkit-user-select:none;
}
#svgdiv {
position:fixed;
margin:auto;
top:1rem;
width:95%;
}
#div1 {
height:30rem;
}
#shape {
  stroke-dashoffset:2000;
  stroke-dasharray: 2000;
}
#shapebg {
  stroke-dashoffset:2000;
  stroke-dasharray: 0;
}
#div2 {
height:19rem;
}

<div id="div1"></div>
<div id="svgdiv">
<svg viewBox="0 0 1080 500">
  <path id="shape" d="M 0 0 10 0  10 0 10 50 10 50 40 50 40 50 40 120 40 120 235 120 235 120 235 50 235 50 q 450 -20 290 130 M 525 180 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="1.5" fill="none" />
 
  <path id="shapebg" d="M 0 0 10 0  10 0 10 50 10 50 40 50 40 50 40 120 40 120 235 120 235 120 235 50 235 50 q 450 -20 290 130 M 525  180 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="0.6" fill="none" />

</svg>
</div>

<div id="div2">
</div>

as you can see it starts from two points, but i need the animation to start from scratch and go to end directly,

any hints please ?

Answer 1

I`ve made a few changes to your code;

1. I've removed the move to command in the middle to get a continous path: M 525 180 595 220 becomes L595 220. Since you don't have any command letter after M, by default everything that comes next are lines L

2. The total length of your path is 2223 not 2000. I've changed it everywere. To know the length of the path you need to use the getTotalLength() method.

3. You don't scroll enough. In your code let value = 2000 - scrollY*4; but the #div1 { height:30rem;} Since in this case 1rem = 16px, 30rem = 16*30 = 480. Since you need to scroll 2223 you need to use let value = 2000 - scrollY*4.631; (2223/480 = 4.631)

Observation: I've rounded numbers, you can use unrounded numbers

const shape = document.querySelector('#shape');
window.addEventListener('scroll', slide);
function slide() {
     let value = 2223 - scrollY*4.631; 
shape.style.strokeDashoffset=  value;
}

//console.log(shape.getTotalLength())

body {
    background:black;
    -webkit-user-select:none;
}
#svgdiv {
position:fixed;
margin:auto;
top:1rem;
width:95%;
}
#div1 {
height:30rem;
}
#shape {
  stroke-dashoffset:2223;
  stroke-dasharray: 2223;
}

#div2 {
height:19rem;
}

<div id="div1"></div>
<div id="svgdiv">
<svg viewBox="0 0 1080 500">
  <path id="shape" d="M0,0L10,0L10,0L10,50L10,50L40,50L40,50L40,120L40,120L235,120L235,120L235,50L235,50Q685,30,525,180L 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="2.5" fill="none" />
 
  <path id="shapebg"  d="M0,0L10,0L10,0L10,50L10,50L40,50L40,50L40,120L40,120L235,120L235,120L235,50L235,50Q685,30,525,180L 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="1.5" fill="none" />

</svg>
</div>

<div id="div2">
</div>