Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
erayner_45092

Draw line while scrolling

Recommended Posts

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

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 post
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.

×