Draw line while scrolling

[Eugene Rayner]

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

[Dipscom]

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.

[Eugene Rayner]

cool, ill look into canvas today  thanks!