Submit your widget

JavaScript library to make drawing animation on SVG

Created 2 years ago   Views 7928   downloads 1680    Author maxwellito
JavaScript library to make drawing animation on SVG
View DemoDownload 65.4 KB
20
Share |

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.

On the following images, the pink color represents the duration value, and the blue one is for delay value.

Principles

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 circlerectline 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 intopath elements to be able to use strokeDashoffset and animate your SVGs.

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

There are few conditions that your SVG must meet:

  • All elements must have a stroke property and cannot be filled. This is because the animation only looks to progressively draw strokes and will not check for filled colours. For example: fill: "none"; stroke: "#FFF";

  • You shoud avoid creating any hidden path elements in your SVG. Vivus considers them all eligible to be animated, so it is advised to remove them before playing with it. If they are not removed the animation might not achieve the desired effect, with blank areas and gaps appearing.

  • text elements aren't allowed, they cannot be transformed into path elements. See #22 for more details.

The code is inspired from other repositories. The drawer is inspired from the excellent Codrops about the post SVG Drawing Animation (if you don't know this website, get ready to have your mind blown). Then for the pathformer, there is a lot of work fromSVGPathConverter by Waest.

Usage

As I said, no dependencies here. All you need to do is include the scripts.

 

Inline SVG

<svg id="my-svg">
  <path...>
  <path...>
  <path...>
</svg>

<script>
  new Vivus('my-svg', {duration: 200}, myCallback);
</script>

Dynamic load

<div id="my-div"></div>

<script>
  new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback);
</script>

Read more:https://github.com/maxwellito/vivus#vivusjs

Tag: SVG