I was wondering if it's possible to dynamically draw a curved line on a website as the user scrolls. I'm pretty sure it could be done using HTML5 Canvas with the bezierCurveTo() method, but that just draws the whole thing out right away.

This will be used on a parallax website that's using the skrollr library.

Is there a library out there that can make this easy?

Any suggestions?

I was wondering if it's possible to dynamically draw a curved line on a website as the user scrolls. I'm pretty sure it could be done using HTML5 Canvas with the bezierCurveTo() method, but that just draws the whole thing out right away.

This will be used on a parallax website that's using the skrollr library.

Is there a library out there that can make this easy?

Any suggestions?

• javascript
• html
• drawing
• html5-canvas
• parallax

• 2 How does the curve relate to the scrolling? Does the curve change in shape as the user scrolls? We need more detail. – kevin628 Commented Aug 2, 2012 at 17:56
• It would be a predetermined path (with many curves and even some loops) that goes throughout the entire document. Preferably, the line would be invisible and just show the black line as the user scrolls so it gives the effect of the line being drawn as the page is scrolled down. Hopefully that make sense. – vipergtsrz Commented Aug 2, 2012 at 20:42

1 Answer 1

The creator of skrollr here. That's a really interesting problem you came up with. Did you know skrollr works on embedded SVG?

After 30 minutes of searching (starting point: How to draw a vector path progressively? (Raphael.js)) I came up with the following official skrollr demo:

http://prinzhorn.github./skrollr/examples/path.html

Yes, I am excited.