How to animate svg line to full page height on scroll?

Question

Animation

Good day to all! Knowledgeable people, please tell me how to make such an animation Example . Or in what direction to dig? When scrolling the page, I made the appearance, disappearance of svg using TweenMax and ScrollMagic libraries, but here is the animation of the line at 45 degrees. from the beginning to the end of the page I do not understand how to do it. Advise where to look, thank you all.

Answer 1

Here is the block that is responsible for the animation of the lines:

<div id="bg" class="" style="width: 100%; height: 7926.44px;">
  	<canvas id="mainBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
  <canvas id="shinesBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
        <canvas id="animationC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
</div>

As you can see from the html, inline-svg is not used here. Therefore, your approach is initially wrong ...
But if you want to make such a line on svg (here will be my IMHO, which is not the most correct (because it is masochistic to do this)), then I would draw the entire svg line, which I would place in div, which will be 100x100 viewport (probably some kind of wrapper will be needed). I would hide svg (dashoffset etc). We catch the scroll. Move the div in the right direction / draw the svg in parallel.
We can immediately say that you will have problems with adaptability (you can solve it ... but this ...) and fps
And now, how "normal guys" do it:
We draw everything in the canvas. Full control over everything. No problems with adaptability + 60 fps
On this site, they seem to have drawn everything with js in canvas (animated with gsap), but it will be easier to use PIXIjs or ThreeJS

Answer 2

Yes, most likely it was implemented by a javascript. If it's a library, then you can probably find it in the code, but it's possible that it's self-written.
By the way, I ask you to pay attention (at least to me on the retina display it is clearly visible) to the edge, the cut of the line. My suggestion:
Judging by how the scroll ends, that's the way it is. If so, then the simplest implementation is to screw (fixed) the mask with the desired height to the footer, and apply it only to this line.