Answer the question
In order to leave comments, you need to log in
How to animate svg line to full page height on scroll?
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 the question
In order to leave comments, you need to log in
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>
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.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question