The Best Way to Create Fantastic ‘Invisible Pen’ Effects in SVG

From the blink tag of the 1990’s to today’s modern technologies such as CSS transitions and animations, the ability to move elements on web pages/applications has been always a tempting goal.

Today, technologies like SVG make it relatively easy to create an effect I’m going to call ‘A Magic Pen’ animation – the viewer watches an illustration appear line by line as if drawn by an invisible pen.

Back in 2013, Jake Archibald very cleverly demonstrated how you could manipulate stroke-dashoffset and stroke-dasharray and some CSS to create this magic pen effect on any SVG linework.

This approach is easy to implement on relatively simple linework, but it’s not always the ideal solution when we want to create something more complex. For more complicated linework animations there are purpose-built tools to help you such as Vivus.js. Vivus is a lightweight JavaScript library which allows us to animate the SVG elements without messing around too much with CSS.

I suppose, now the main question popping up in your heads is: What makes Vivus better solution compared to the CSS approach?

In my opinion, Vivus has three main advantages which should be mentioned:

1. Ease of use : In Vivus, we set all the animation properties in a Vivus 'constructor object' and in context along with our SVG document. This makes changes more convenient and intuitive. With only a couple of tweaks we can get a completely different animation result.

2. Automation : As you may already know, the stroke-dashoffset property is available only on SVG path elements. This can be challenging because in an SVG document there are other types of elements such as the circle, rectangle, line, and polyline objects which can easily break the entire animation.

   Fortunately, Vivus is smart enough to automatically convert all SVG objects into path elements making possible to animate them too.

   However, do note that we need to transform all text element manually into paths, using an editor such as Illustrator, InkScape, and alike.

3. Flexibility: Vivus offers five types of animation with a lot of options for manipulation, which gives us great flexibility about our animation’s behavior.

Now, let’s start exploring Vivus in more detail and see its advantages in action.

Attention designers: Yes, there is some code ahead, but Vivus is meant for designers to use. Even if you’re not a hardcore codemonkey, a little cut, paste and edit will get you some pretty cool results.

Exploring Vivus

To start using Vivus we need to include it in our HTML like this:

[code language="html"]<script src="http://ift.tt/2f0ZWih"></script>
[/code]

Then, we can use an inline SVG in the following manner:

[code language="html"]
<svg id="canvas">
<path...>
<path...>
<path...>
</svg>
[/code]

And the script:

[code language="html"]
<script>
new Vivus('canvas', {duration: 300}, callback);
</script>
[/code]

Here, we have an inline SVG and a Vivus constructor function which takes three parameters:

• ID of the DOM element we want to interact with (our ID is ‘canvas’).

• An option object where we put all the animation options.

• And an optional callback function called at the end of the animation.

Before we move on, we need to know the following:

• By default Vivus draws elements in the same order as they are defined in the SVG document.

• All SVG elements must have a stroke property and cannot be filled.

• We must not put any hidden path elements in our SVG. Otherwise the animation might not be displayed properly.

• Text elements cannot be converted into path elements. If you want to use text in our animation we need first to transform it into paths (in editor like Illustrator, InkScape).

The Five Drawing Options of Vivus

In the next sections we’ll explore all five animation types offered by Vivus. We’ll use a very simple drawing (four lines) in order to see clearer the difference between the available animation options.

Delayed

See the Pen Simple line animation by SitePoint (@SitePoint) on CodePen.

CodePen

Here our SVG drawing consists of four lines with equal length. In delayed mode, which is the default animation, all paths start almost simultaneously with a small delay between each one.

One-By-One

See the Pen Vivus demo: One-by-one by SitePoint (@SitePoint) on CodePen.

CodePen

In oneByOne mode each path is drawn one after the other. In the example above the same four lines are drawn one by one in a continuous manner.

Continue reading %The Best Way to Create Fantastic ‘Invisible Pen’ Effects in SVG%

by Ivaylo Gerchev via SitePoint