Draw lines while scrolling down

[D3N1]

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, http://letters-inc.jp/ …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 :).

[nixnerd]

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:

http://janpaepke.github.io/ScrollMagic/

[D3N1]

Thank you so much NIX,

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

[Paulie_D]

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.

[nixnerd]

@D3N1,

@Paulie_D 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.

[nixnerd]

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.

[shaneisme]

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

https://css-tricks.com/svg-line-animation-works/

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!

[nixnerd]

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

[Author]

Posts