jQuery Plugin To Draw and Animate SVG Paths - zPath.js

Just another jQuery SVG path animation plugin which allows you to draw and animate SVG path strokes with several customization options.

See also:

• SVG Path Animation Plugin with jQuery - Lazy Line Painter
• Lightweight jQuery SVG Line Animation Plugin - DrawSVG
• SVG Path Animation On Scroll Using jQuery - SVG Scroll
• jQuery Plugin For SVG Path Animation - SVG Path Painter

Basic usage:

1. Include the zPath.js jQuery plugin after including jQuery JavaScript library.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.zpath.js"></script>

2. Define a SVG path somewhere.

<svg class="demo">
  <path ...>
</svg>

3. Draw and animate the SVG path.

$('.demo').zPath();

4. Config the SVG path animation.

$('.demo').zPath({

  // 'start' or 'destroy'
  action: 'start',

  // the time that it will take for each path to draw
  drawTime: 3000,

  // all : will draw all the paths at once
  // terminus : draws 2 paths at once, one is from the begining and the other one strats reversed from the end
  // terminusDelayed : the same as terminus but it wont wait until the previous path has finished animating, instead it will start after the delay time has passed
  // 1by1,2by2 . . . 10by10 : let's say you will use 4by4 this will draw 4 paths at the same time
  // 2by2Delayed,3by3Delayed ... : this will draw the specific number of paths at the same time, but again it won't wait fot the other paths to finish, instead it will start after the delay has passed
  draw: 'all',

  // the delay between paths
  delay: 20,
  
  // shuffle the paths draw, looks good on terminusDelayed or nbynDelayed
  shuffle: false
  
});

---

This awesome jQuery plugin is developed by Zet-Tools. For more Advanced Usages, please check the demo page or visit the official website.