Home / Drawing & SVG / vivus.js - Drawing animation on SVG
vivus.js - Drawing animation on SVG

vivus.js - Drawing animation on SVG

Download Demo
  • Overview
  • Documents
User Rating: 4.5/5 ( 1 votes)
Your Rating:

Vivus is a little JavaScript class (little because it's lightweight and have no dependency) to make drawing animation with SVGs in a webpage. Different animations are available, even scripting the entire SVG to do whatever you want.

Animations

On the following images, the pink color represent the duration value, and the blue is for the delayvalue.

Delayed

Timeline for delayed animation

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

Async

Timeline for async animation

Each line is drawn asynchronously. They all starts and finishes at the same time, this is why async.

OneByOne

Timeline for oneByOne animation

Each path element is drawn one after each other. This animation give a proper impression of live drawing. The duration for each line depends on their length, to make a constant drawing speed.

Principles

To make this effect, the script use the CSS property strokeDashoffset. This property manage the stroke offset on every line of the SVG. Add some JavaScript to update progressively this value, and the magic begins.

Unfortunately, there's a problem, this property is only available on path elements. Or, in a SVG there a lot of circle, rect, line, polyline... and they are breaking the animation. So an other class is available in the repo, called pathformer. It's made to transform all objects of your SVG into pathelements, to can use the property and animate your SVG.

The animation always draw elements in the same order as they are defined in the SVG tag.

There is few conditions about your SVG:

  • Every element mustn't be filled, but have a stroke (of your choice, go crazy). Because the animation is based on it
  • Do not have any hidden path elements in your SVG, Vivus consider them all eligible to be animated. So think to remove them before playing with it, or the animation might look tricky with blank and gaps.
Scroll To Top