In this post, we will discuss a wonderful resource SVG Animation Vivus Js which adds more life to SVG. We are going to use Vivus Js for SVG path animation. That’s improving our representation of SVG in our design.
Vivus Js is a lightweight javascript standalone class, means no jquery dependency. That allows you to animate your SVG path. There is the variety of animation available.
Type of animation
- Delayed: Every path is drawn at the same time with some delay.
- Sync: Each path is drawn synchronously.
- OneByOne: Each path is drawn one by one.
As I already mentioned, no dependency here. You just need to do is include the script.
Inline SVG Animation
<svg id="cb-svg">
<path...>
<path...>
<path...>
</svg>
<script>
new Vivus('cb-svg', {duration: 200}, myCallback);
</script>
Dynamic Load
<object id="cb-svg" type="image/svg+xml" data="assets/svg/element.svg"></object>
<script>
new Vivus('cb-svg', {duration: 200}, myCallback);
</script>
Lots more options, methods and timing functions available. You can check the official docs for this plugin. Repository link is given below.
It’s open source plugin and available on GitHub, You can check here the complete repository. Also, found more resources here.
If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee