vivus, bringing your SVGs to life

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

View on GitHub

How it looks

Delayed

Every path element is drawn at the same time with a small delay at the start. This is currently the default animation.

Async

Each line is drawn asynchronously. They all start and finish at the same time, hence the name `async`.

OneByOne

Each path element is drawn one after the other. This animation gives the best impression of live drawing.

How it works

To get this effect, the script uses the CSS property strokeDashoffset. This property manages the stroke offset on every line of the SVG. Now, all we have to do is add some JavaScript to update this value progressively and the magic begins.
However, there's a problem with this. The strokeDashoffset property is only available on the path elements. This is an issue because in an SVG there are a lot of elements such as circle, rect, line and polyline which will break the animation. So to fix this, there is another class available in the repo called pathformer. It's made for transforming all objects of your SVG into path elements to be able to use strokeDashoffset and animate your SVGs.

The code is inspired from other repositories. The drawer is inspired from the excellent Codrops post about SVG Drawing Animation (if you didn't know about this website, get ready to have your mind blown). The pathformer is inspired from SVGPathConverter by Waest.

How to use it

As I said, there are no dependencies here. You just need to include the script.

The library is also available via Bower: bower install vivus

new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);

The Vivus constructor asks for 3 parameters :

The ID of the SVG to animate (or the DOM element)
Options object (described in the following)
Callback to call at the end of the animation (optional)

The options object must respect the following structure :

type string: define what kind of animation will be used: delayed, async, oneByOne, scenario or scenario-sync
duration integer: animation duration, in frames
start string: define how to trigger the animation
inViewport once the SVG is in the viewport
manual give you the freedom to call play method to start
autostart make it start right now
delay integer: time between the drawing of first and last path, in frames (only for delayed animations)
dashGap integer: whitespace extra margin between dashes. The default value is 2. Increase it in case of glitches at the initial state of the animation
forceRender boolean: force the browser to re-render all updated path items. By default, the value is true on IE only. (more details)
selfDestroy boolean: remove all extra styling on the SVG, and leave it as original

To control the animation, there are three methods are available : play, stop and reset. The method play takes one parameter which is the speed. This value can be positive, negative (to go backwards), or under 1 to play slowly. By default the value is 1.

Scenarize

This feature allows you to script the animation of your SVG. To do this, the custom values will be set directly in the DOM of the SVG.

{type: 'scenario'}

This type is easier to understand, but takes longer to implement. All you have to do is define the start and duration of each element with data-start and data-duration attributes. If this is missing, it will use the default values given to the constructor.

The best part of this type is the flexibility it provides. You don't have to respect the order/stack of the SVG and you can start with the last element, then continue with the first to finish with all the rest at the same time.

You will then have to define custom rules for each element in your SVG via extra attributes in your SVG DOM :

data-start integer: time when the animation must start, in frames
data-duration integer: animation duration of this path, in frames

<svg>
  <circle data-start="0" data-duration="10" ... />
  <circle data-start="20" data-duration="10" ... />
  <circle data-start="20" data-duration="20" ... />
  <circle data-start="0" data-duration="30" ... />
</svg>

{type: 'scenario-sync'}

It's not the sexiest code ever, but it's quite flexible. In addition to this, the behaviour is fairly different.

By using this animation type, the default behaviour is the same as `oneByOne`. However, you can define some properties on a specific path item such as the duration, the delay to start (from the end of the previous path) and if it should be played asynchronously..

data-delay integer: time between the end of the animation of the previous path and the start of the current path, in frames
data-duration integer: animation duration of this path, in frames
data-async (no value required): make the drawing of this path asynchronous. It means the next path will start at the same time.

If a path does not have an attribute for duration or delay then the default values, set in the options, will be used.

For an easier debug have a look to the attribute map of your Vivus object. This contains the mapping of your animation. If you're using Google Chrome, I recommend you use `console.table` to get a nice output of the array which will make your debug easier.

Here is an example using scenario-sync.
I would recommend you look at the source code, it's well commented.

Firstly, the case is drawn asynchronously. Then, after a small pause it starts to draw the lens, followed by the flash and then the picture output. Finally, it finishes with the stripes on the front.

Thanks for watching.

Made with love a keyboard