The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Draw lines while scrolling down

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #176244

    Hi, Its my first post here, so I hope you can help me.

    I would like to know how to get the effect shown in the page of Letters inc, …I simply love the site, I assume there must be a helpful framework or something to work easily with that effect.

    Im a graphic designer, I have designed a few sites in plain HTML4 with some Jquery plugins… now Im trying to design my portfolio but I would like to animate one of my illustrations with full HTML5 and CSS3 as a homepage, and I guess it needs a little bit of Javascript.

    Thanks :).


    So, we answer this question almost daily. Everyone wants to know about scroll effects. It’s not your fault really, no one really knows what they are called (most people call this a parallax effect when it’s not).

    Here is what you want:


    Thank you so much NIX,

    I am aware of the scrollmagic plugin but the drawing thing while scrolling down is also posible?


    If you inspect the site with developer tools there are layers of divs containing SVGs elements which are paths being animated by JS, transitions or stroke-dash offset animations.

    A lot of work…nice effect..but a lot of work.



    is correct. ScrollMagic allows you to tie any numerical value to scroll position… even some NON numerical values. Last I checked, changing font-family worked.

    There’s many ways you can go about this. You could use divs for straight lines (not recommended). You could use JS to draw SVG lines (probably the best way) with something like Snap. Or, you could do it the easy to understand but time consuming way… which is draw an SVG in Illustrator or Inkscape, then reference the path via CSS/JS.

    If you use ANY of these three options… ScrollMagic is the plugin that will make the lines grow upon scroll.

    ScrollMagic has SEVERAL tutorials and excellent docs. You can figure out how to do pretty much anything with it.


    There is even a fourth option… you COULD use the canvas element to draw lines with JS. HOWEVER… this poses probably the highest learning curve AND canvas poses some problems with fluidity AFAIK. The canvas itself is easy to make fluid… the elements inside is another story. That being said, canvas will render the fastest.


    Chris put up a basic overview for how to use SVG line drawing:

    It’s not too many steps on how to do this + attach the animation percentages to scrolling.

    The hard part is doing the actual line drawing!


    I forgot about that post! If I could feature @shaneisme’s answer… I would.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.