Working with SVG consists of two parts: designing itself and development. They are tired very closely and depend each on another. The nature of SVG as both an image format and a XML format, every step taken in the graphics editor directly affects the resulting code.

There are a lot of ways to animate SVG. It could be done with the tag that goes right into the SVG code, with javascript libraries or using inline SVG code inside HTML) and animating the parts right through CSS. My task was animating SVG on page scrolling and as a base I used “Masking SVG Animations” by Nathan Gordon tutorial.

I love to work with Adobe Illustrator, so I started with my design firstly. The final image should be:

Creating your *.svg image is the most critical step — if you have problems making it work, probably it’s because your SVG assets weren’t correctly produced.

1. The design stage: drawing vector image.

I decided to draw my picture using ‘path’.
*The ‘path’ element is the most powerful element in the SVG library of basic shapes (lines, curves, arcs, etc.). The shape of a path element is defined by one attribute – ‘d’ (‘d’ stands for data and it could just as well stand for directions.).
There are a number of stroke related properties within SVG that allow us to control the details of strokes, some of them are: stroke, stroke-width, stroke-linecap, stroke-dasharray, stroke-dashoffset.

It’s important to start drawing the path with the right direction – to avoid a headache at the development stage. Well, you can change the direction in the XML code or via styles or javascript.. but for complicated shapes it’s easier to think about the final result while drawing )).
See my source file:

I gave a stroke-width property for all my animated paths. And created compound paths from ‘line’ and ‘circle’ objects:

2. The development stage.

All the magic comes with CSS attributes ‘stroke-dasharray’ and ‘stroke-dashoffset’ of the path’s length:

function pathPrepare($el){

var lineLength = $el[0].getTotalLength();

$el.css("stroke-dasharray", lineLength);

$el.css("stroke-dashoffset", lineLength);

}

And a tween animates the stroke-dashoffset property to zero.

I included ScrollMagic and animation.gsap in the html, just after the TweenMax.min.js reference – to react to the user’s current scroll position.

We need the ScrollMagic controller, then timeline and then – add this timeline to a ScrollMagic scene:

Important note: I encountered an issue on default Android browser (everything was tested successfully on IE, Edge, Safari, Chrome and Firefox). The SVG element in a relative ‘div’ takes the correct width and wrong top position. It was fixed with adding style=’max-height:100%;’ to the ‘svg’ element.