https://frogloud.com/js/jquery.drawsvg.js

1(function(factory) {
2  /* global define */
3  if ( typeof define === 'function' && define.amd ) {
4    define(['jquery'], factory);
5  } else if ( typeof module === 'object' && module.exports ) {
6    // Node/CommonJS
7    module.exports = function( root, jQuery ) {
8      if ( jQuery === undefined ) {
9        if ( typeof window !== 'undefined' ) {
10          jQuery = require('jquery');
11        } else {
12          jQuery = require('jquery')(root);
13        }
14      }
15      factory(jQuery);
16      return jQuery;
17    };
18  } else {
19    // Browser globals
20    factory(jQuery);
21  }
22}(function($) {
23  'use strict';
24
25  var pluginName = 'drawsvg',
26      defaults = {
27        duration: 1000,
28        stagger: 200,
29        easing: 'swing',
30        reverse: false,
31        callback: $.noop
32      },
33      DrawSvg = (function() {
34        var fn = function fn(elm, options) {
35          var _this = this,
36              opts = $.extend(defaults, options);
37
38          _this.$elm = $(elm);
39
40          if ( !_this.$elm.is('svg') )
41            return;
42
43          _this.options = opts;
44          _this.$paths = _this.$elm.find('path');
45
46          _this.totalDuration = opts.duration + (opts.stagger * _this.$paths.length);
47          _this.duration = opts.duration / _this.totalDuration;
48
49          _this.$paths.each(function(index, elm) {
50            var pathLength = elm.getTotalLength();
51
52            elm.pathLen = pathLength;
53            elm.delay = (opts.stagger * index) / _this.totalDuration;
54            elm.style.strokeDasharray = [pathLength, pathLength].join(' ');
55            elm.style.strokeDashoffset = pathLength;
56          });
57
58          _this.$elm.attr('class', function(index, classNames) {
59            return [classNames, pluginName + '-initialized'].join(' ');
60          });
61        };
62
63        fn.prototype.getVal = function(p, easing) {
64          return 1 - $.easing[easing](p, p, 0, 1, 1);
65        };
66
67        fn.prototype.progress = function progress(prog) {
68          var _this = this,
69              opts = _this.options,
70              duration = _this.duration;
71
72          _this.$paths.each(function(index, elm) {
73            var elmStyle = elm.style;
74
75            if ( prog === 1 ) {
76              elmStyle.strokeDashoffset = 0;
77            } else if ( prog === 0 ) {
78              elmStyle.strokeDashoffset = elm.pathLen + 'px';
79            } else if ( prog >= elm.delay && prog <= duration + elm.delay ) {
80              var p = ((prog - elm.delay) / duration);
81              elmStyle.strokeDashoffset = ((_this.getVal(p, opts.easing) * elm.pathLen) * (opts.reverse ? -1 : 1)) + 'px';
82            }
83          });
84        };
85
86        fn.prototype.animate = function animate() {
87          var _this = this;
88
89          _this.$elm.attr('class', function(index, classNames) {
90            return [classNames, pluginName + '-animating'].join(' ');
91          });
92
93          $({ len: 0 }).animate({
94            len: 1
95          }, {
96            easing: 'linear',
97            duration: _this.totalDuration,
98            step: function(now, fx) {
99              _this.progress.call(_this, now / fx.end);
100            },
101            complete: function() {
102              _this.options.callback.call(this);
103
104              _this.$elm.attr('class', function(index, classNames) {
105                return classNames.replace(pluginName + '-animating', '');
106              });
107            }
108          });
109        };
110
111        return fn;
112      })();
113
114  // A really lightweight plugin wrapper around the constructor,
115  // preventing against multiple instantiations
116  $.fn[pluginName] = function(method, args) {
117    return this.each(function() {
118      var data = $.data(this, pluginName);
119
120      ( data && ''+method === method && data[method] ) ?
121        data[method](args) :
122        $.data(this, pluginName, new DrawSvg(this, method));
123    });
124  };
125}));