Share Posted May 30, 2017 Hello! I am currently trying to mimic the effect on this website: http://brightmedia.pl/ If you scroll down in my codepen you can see a similar effect with the line being drawn. I was wondering if anyone knew/has done this before and could provide me any additional information in: A. How do I keep the point of drawing in the middle of the window B. How do I go about adding extra paths to the animation? Do I get seperate SVGs to trigger on scroll? Thanks for any help in advance See the Pen EmBNZN by erayner (@erayner) on CodePen Link to post Share on other sites
Share Posted May 30, 2017 Hello @erayner_45092! On looking at the given example, I'd say you will have to work out the ratio between the height of the screen and the height of the SVG. I have noticed that in the BrightMedia website, they are using <canvas> for the line animation, they have it fixed in position and probably just tween the duration of a pre-determined animation as you scroll down. It sits in the center of the screen because the <canvas> element is fixed in place. You can do the same thing with your SVG, you fix the encompassing <svg> into position and tween the .progress() of a timeline as you scroll down the site. Of course, <canvas> will have a better performance than <svg> if you add enough lines. Hope this helps. 5 Link to post Share on other sites
Author Share Posted May 30, 2017 cool, ill look into canvas today thanks! Link to post Share on other sites
