vivus, bringing your SVGs to life

Vivus is a little JavaScript class (little because it's lightweight and has no dependencies) to make animating SVGs easy. Different animations are available, and you can even script the entire SVG to do whatever you want.

View on GitHub

How it looks

Delayed

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

Async

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

OneByOne

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

How it works

To make this effect, the script use the CSS property strokeDashoffset. This property manages the stroke offset on every line of the SVG. Add some JavaScript to update this value progressively, and the magic begins.
Unfortunately, there's a problem, this property is only available on path elements. So if you use circle, rect, line, or polyline, they will break the animation. Because of this, another class is available in the repo, called pathformer. It's made to transform all the objects in your SVG into path elements, so you can use this property and then animate your SVG.
The animation always draws elements in the same order as they are set in the SVG tag.

The code is inspired from other repo. The drawer is inspired from the excellent Codrops post about SVG Drawing Animation (if you didn't know about this website, get ready for mind-blowing). The pathformer is inspired quite a bit from SVGPathConverter by Waest.

How to use it

As I said, no dependencies here. You just need to include the scripts.

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

The Vivus constructor asks for 3 parameters :

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 this 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)
selfDestroy boolean: remove all extra styling on the SVG, and leave it as original

To control the animation, 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. You just have to define the start and duration of each element with data-start and data-duration attributes. If missing, it will use the default value given to the constructor.

The good point about this type is the flexibility. You don't have to respect the order/stack of the SVG. You can start with the last element, then continue with the first, to finish with all the rest at the same time.

Then 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 quite flexible. The behaviour is quite different, let's see.

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

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. The default one, set in options, will be used.

For an easier debug, have a look to the attribute map of your Vivus object. This one contain the mapping of your animation. If you're using Google Chrome, I recommand you to 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 recommend you to look at the source code, it's well commented.

The idea is to first, draw the case asynchronously, then after a little pause start to draw the lens, following by the flash and the picture output. To finish with the stripes on the front.

Thanks for watching.

Made with love a keyboard