Jump to content


Draw line while scrolling

Moderator Tag

Recommended Posts



I am currently trying to mimic the effect on this website:



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 comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

cool, ill look into canvas today :) thanks!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.