animejs - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

anime.js

 /**
- * http://anime-js.com
+ * http://animejs.com
  * JavaScript animation engine
- * @version v2.0.2
+ * @version v2.1.0
  * @author Julian Garnier
@@ -46,3 +46,3 @@ * @copyright ©2017 Julian Garnier
 
-  const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skewX', 'skewY'];
+  const validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skewX', 'skewY', 'perspective'];
   let transformString;
@@ -233,6 +233,2 @@
 
-  function arrayLength(arr) {
-    return arr.length;
-  }
-
   function flattenArray(arr) {
@@ -324,3 +320,3 @@ return arr.reduce((a, b) => a.concat(is.arr(b) ? flattenArray(b) : b), []);
   function getUnit(val) {
-    const split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(val);
+    const split = /([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val);
     if (split) return split[2];
@@ -330,3 +326,3 @@ }
   function getTransformUnit(propName) {
-    if (stringContains(propName, 'translate')) return 'px';
+    if (stringContains(propName, 'translate') || propName === 'perspective') return 'px';
     if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) return 'deg';
@@ -337,6 +333,2 @@ }
 
-  function parseFloatValue(val) {
-    return parseFloat(val);
-  }
-
   function minMaxValue(val, min, max) {
@@ -378,3 +370,3 @@ return Math.min(Math.max(val, min), max);
     const value = values.filter((val, i) => props[i] === propName );
-    return arrayLength(value) ? value[0] : defaultVal;
+    return value.length ? value[0] : defaultVal;
   }
@@ -394,8 +386,9 @@
     if (!operator) return to;
-    const x = parseFloatValue(from);
-    const y = parseFloatValue(to.replace(operator[0], ''));
+    const u = getUnit(to) || 0;
+    const x = parseFloat(from);
+    const y = parseFloat(to.replace(operator[0], ''));
     switch (operator[0][0]) {
-      case '+': return x + y;
-      case '-': return x - y;
-      case '*': return x * y;
+      case '+': return x + y + u;
+      case '-': return x - y + u;
+      case '*': return x * y + u;
     }
@@ -407,14 +400,60 @@ }
     const originalUnit = getUnit(val);
-    const unitLess = originalUnit ? val.substr(0, arrayLength(val) - arrayLength(originalUnit)) : val;
-    return unit ? unitLess + unit : unitLess;
+    const unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val;
+    return unit && !/\s/g.test(val) ? unitLess + unit : unitLess;
   }
 
-  // Motion path
+  // getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes. 
+  // adapted from https://gist.github.com/SebLambla/3e0550c496c236709744
 
-  function isPath(val) {
-    return is.obj(val) && objectHas(val, 'totalLength');
+  function getDistance(p1, p2) {
+    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); 
   }
 
+  function getCircleLength(el) {
+    return 2 * Math.PI * el.getAttribute('r');
+  }
+
+  function getRectLength(el) {
+    return (el.getAttribute('width') * 2) + (el.getAttribute('height') * 2);
+  }
+
+  function getLineLength(el) {
+    return getDistance(
+      {x: el.getAttribute('x1'), y: el.getAttribute('y1')}, 
+      {x: el.getAttribute('x2'), y: el.getAttribute('y2')}
+    );
+  }
+
+  function getPolylineLength(el) {
+    const points = el.points;
+    let totalLength = 0;
+    let previousPos;
+    for (let i = 0 ; i < points.numberOfItems; i++) {
+      const currentPos = points.getItem(i);
+      if (i > 0) totalLength += getDistance(previousPos, currentPos);
+      previousPos = currentPos;
+    }
+    return totalLength;
+  }
+
+  function getPolygonLength(el) {
+    const points = el.points;
+    return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0));
+  }
+
+  // Path animation
+
+  function getTotalLength(el) {
+    if (el.getTotalLength) return el.getTotalLength();
+    switch(el.tagName.toLowerCase()) {
+      case 'circle': return getCircleLength(el);
+      case 'rect': return getRectLength(el);
+      case 'line': return getLineLength(el);
+      case 'polyline': return getPolylineLength(el);
+      case 'polygon': return getPolygonLength(el);
+    }
+  }
+
   function setDashoffset(el) {
-    const pathLength = el.getTotalLength();
+    const pathLength = getTotalLength(el);
     el.setAttribute('stroke-dasharray', pathLength);
@@ -424,2 +463,8 @@ return pathLength;
 
+  // Motion path
+
+  function isPath(val) {
+    return is.obj(val) && objectHas(val, 'totalLength');
+  }
+
   function getPath(path, percent) {
@@ -432,3 +477,3 @@ const el = is.str(path) ? selectString(path)[0] : path;
         property: prop,
-        totalLength: el.getTotalLength() * (p / 100)
+        totalLength: getTotalLength(el) * (p / 100)
       }
@@ -461,3 +506,3 @@ }
       numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0],
-      strings: value.split(rgx)
+      strings: (is.str(val) || unit) ? value.split(rgx) : []
     }
@@ -467,3 +512,3 @@ }
   function recomposeValue(numbers, strings) {
-    return strings.reduce((a, b, i) => a + numbers[i - 1] + b);
+    return (strings.length === 0) ? numbers[0] : strings.reduce((a, b, i) => a + numbers[i - 1] + (b ? b : ' '));
   }
@@ -481,3 +526,3 @@
     return parsed.map((t, i) => {
-      return {target: t, id: i, total: arrayLength(parsed)};
+      return {target: t, id: i, total: parsed.length};
     });
@@ -491,3 +536,3 @@ }
     if (is.arr(prop)) {
-      const l = arrayLength(prop);
+      const l = prop.length;
       const isFromTo = (l === 2 && !is.obj(prop[0]));
@@ -536,8 +581,8 @@ if (!isFromTo) {
         value = value.map(v => getFunctionValue(v, animatable));
-        if (arrayLength(value) === 1) value = value[0];
+        if (value.length === 1) value = value[0];
       }
       t[p] = value;
     }
-    t.duration = parseFloatValue(t.duration);
-    t.delay = parseFloatValue(t.delay);
+    t.duration = parseFloat(t.duration);
+    t.delay = parseFloat(t.delay);
     return t;
@@ -596,3 +641,3 @@ }
         tweens: tweens,
-        duration: tweens[arrayLength(tweens) - 1].end,
+        duration: tweens[tweens.length - 1].end,
         delay: tweens[0].delay
@@ -615,3 +660,3 @@ }
     const math = (type === 'delay') ? Math.min : Math.max;
-    return arrayLength(animations) ? math.apply(Math, animations.map(anim => anim[type])) : tweenSettings[type];
+    return animations.length ? math.apply(Math, animations.map(anim => anim[type])) : tweenSettings[type];
   }
@@ -642,3 +687,3 @@
     function step(t) {
-      const activeLength = arrayLength(activeInstances);
+      const activeLength = activeInstances.length;
       if (activeLength) {
@@ -676,19 +721,2 @@ let i = 0;
 
-    instance.reset = function() {
-      const direction = instance.direction;
-      const loops = instance.loop;
-      instance.currentTime = 0;
-      instance.progress = 0;
-      instance.paused = true;
-      instance.began = false;
-      instance.completed = false;
-      instance.reversed = direction === 'reverse';
-      instance.remaining = direction === 'alternate' && loops === 1 ? 2 : loops;
-      for (let i = arrayLength(instance.children); i--; ){
-        const child = instance.children[i];
-        child.seek(child.offset); 
-        child.reset();
-      }
-    }
-
     function toggleInstanceDirection() {
@@ -705,5 +733,5 @@ instance.reversed = !instance.reversed;
       if (time >= instance.currentTime) {
-        for (let i = 0; i < arrayLength(children); i++) children[i].seek(time);
+        for (let i = 0; i < children.length; i++) children[i].seek(time);
       } else {
-        for (let i = arrayLength(children); i--;) children[i].seek(time);
+        for (let i = children.length; i--;) children[i].seek(time);
       }
@@ -716,15 +744,14 @@ }
       const animations = instance.animations;
-      while (i < arrayLength(animations)) {
+      while (i < animations.length) {
         const anim = animations[i];
         const animatable = anim.animatable;
         const tweens = anim.tweens;
-        const tween = tweens.filter(t => (insTime < t.end))[0] || tweens[arrayLength(tweens) - 1];
-        const isPath = tween.isPath;
+        const tween = tweens.filter(t => (insTime < t.end))[0] || tweens[tweens.length - 1];
+        const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;
+        const eased = isNaN(elapsed) ? 1 : tween.easing(elapsed, tween.elasticity);
         const round = tween.round;
-        const elapsed = minMaxValue(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;
-        const eased = tween.easing(elapsed, tween.elasticity);
         const progress = recomposeValue(tween.to.numbers.map((number, p) => {
-          const start = isPath ? 0 : tween.from.numbers[p];
+          const start = tween.from.numbers[p];
           let value = start + eased * (number - start);
-          if (isPath) value = getPathProgress(tween.value, value);
+          if (tween.isPath) value = getPathProgress(tween.value, value);
           if (round) value = Math.round(value * round) / round;
@@ -766,11 +793,13 @@ return value;
       const insReversed = instance.reversed;
-      const insTime = minMaxValue(adjustTime(engineTime), 0, insDuration);
-      if (instance.children) syncInstanceChildren(insTime);
-      if (insTime > insOffset && insTime < insDuration) {
-        setAnimationsProgress(insTime);
-        if (!instance.began && insTime >= insDelay) {
+      const insTime = adjustTime(engineTime);
+      if (instance.children.length) syncInstanceChildren(insTime);
+      if (insTime >= insDelay) {
+        setCallback('run');
+        if (!instance.began) {
           instance.began = true;
           setCallback('begin');
         }
-        setCallback('run');
+      }
+      if (insTime > insOffset && insTime < insDuration) {
+        setAnimationsProgress(insTime);
       } else {
@@ -786,2 +815,3 @@ if (insTime <= insOffset && insCurrentTime !== 0) {
       }
+      setCallback('update');
       if (engineTime >= insDuration) {
@@ -793,9 +823,9 @@ if (instance.remaining) {
           instance.pause();
-          if ('Promise' in window) {
-            resolve();
-            promise = makePromise();
-          }
           if (!instance.completed) {
             instance.completed = true;
             setCallback('complete');
+            if ('Promise' in window) {
+              resolve();
+              promise = makePromise();
+            }
           }
@@ -805,5 +835,20 @@ }
       }
-      setCallback('update');
     }
 
+    instance.reset = function() {
+      const direction = instance.direction;
+      const loops = instance.loop;
+      instance.currentTime = 0;
+      instance.progress = 0;
+      instance.paused = true;
+      instance.began = false;
+      instance.completed = false;
+      instance.reversed = direction === 'reverse';
+      instance.remaining = direction === 'alternate' && loops === 1 ? 2 : loops;
+      setAnimationsProgress(0);
+      for (let i = instance.children.length; i--; ){
+        instance.children[i].reset();
+      }
+    }
+
     instance.tick = function(t) {
@@ -861,9 +906,9 @@ now = t;
     const targetsArray = parseTargets(targets);
-    for (let i = arrayLength(activeInstances); i--;) {
+    for (let i = activeInstances.length; i--;) {
       const instance = activeInstances[i];
       const animations = instance.animations;
-      for (let a = arrayLength(animations); a--;) {
+      for (let a = animations.length; a--;) {
         if (arrayContains(targetsArray, animations[a].animatable.target)) {
           animations.splice(a, 1);
-          if (!arrayLength(animations)) instance.pause();
+          if (!animations.length) instance.pause();
         }
@@ -881,4 +926,6 @@ }
     tl.add = function(instancesParams) {
-      tl.children.forEach( i => { i.began = true; i.completed = true; });
-      toArray(instancesParams).forEach(insParams => {
+      tl.children.forEach(i => { i.began = true; i.completed = true; });
+      toArray(instancesParams).forEach(instanceParams => {
+        let insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params || {}));
+        insParams.targets = insParams.targets || params.targets;
         const tlDuration = tl.duration;
@@ -888,10 +935,13 @@ const insOffset = insParams.offset;
         insParams.offset = is.und(insOffset) ? tlDuration : getRelativeValue(insOffset, tlDuration);
+        tl.began = true;
+        tl.completed = true;
         tl.seek(insParams.offset);
         const ins = anime(insParams);
+        ins.began = true;
+        ins.completed = true;
         if (ins.duration > tlDuration) tl.duration = ins.duration;
-        ins.began = true;
         tl.children.push(ins);
       });
+      tl.seek(0);
       tl.reset();
-      tl.seek(0);
       if (tl.autoplay) tl.restart();
@@ -903,3 +953,3 @@ return tl;
 
-  anime.version = '2.0.2';
+  anime.version = '2.1.0';
   anime.speed = 1;
@@ -906,0 +956,0 @@ anime.running = activeInstances;

anime.min.js

@@ -6,23 +6,25 @@ /*
 var $jscomp$this=this;
-(function(v,p){"function"===typeof define&&define.amd?define([],p):"object"===typeof module&&module.exports?module.exports=p():v.anime=p()})(this,function(){function v(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function p(a){return a.reduce(function(a,d){return a.concat(g.arr(d)?p(d):d)},[])}function w(a){if(g.arr(a))return a;g.str(a)&&(a=v(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function F(a,b){return a.some(function(a){return a===b})}
-function A(a){var b={},d;for(d in a)b[d]=a[d];return b}function G(a,b){var d=A(a),c;for(c in a)d[c]=b.hasOwnProperty(c)?b[c]:a[c];return d}function B(a,b){var d=A(a),c;for(c in b)d[c]=g.und(a[c])?b[c]:a[c];return d}function S(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,d,h){return b+b+d+d+h+h});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var d=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+d+","+b+")"}function T(a){function b(a,b,c){0>
-c&&(c+=1);1<c&&--c;return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var d=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(d[1])/360;var c=parseInt(d[2])/100,d=parseInt(d[3])/100;if(0==c)c=d=a=d;else{var e=.5>d?d*(1+c):d+c-d*c,l=2*d-e,c=b(l,e,a+1/3),d=b(l,e,a);a=b(l,e,a-1/3)}return"rgb("+255*c+","+255*d+","+255*a+")"}function x(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function U(a){if(-1<a.indexOf("translate"))return"px";
-if(-1<a.indexOf("rotate")||-1<a.indexOf("skew"))return"deg"}function H(a,b){return g.fnc(a)?a(b.target,b.id,b.total):a}function C(a,b){if(b in a.style)return getComputedStyle(a).getPropertyValue(b.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())||"0"}function I(a,b){if(g.dom(a)&&F(V,b))return"transform";if(g.dom(a)&&(a.getAttribute(b)||g.svg(a)&&a[b]))return"attribute";if(g.dom(a)&&"transform"!==b&&C(a,b))return"css";if(null!=a[b])return"object"}function W(a,b){var d=U(b),d=-1<b.indexOf("scale")?
-1:0+d;a=a.style.transform;if(!a)return d;for(var c=[],e=[],l=[],h=/(\w+)\((.+?)\)/g;c=h.exec(a);)e.push(c[1]),l.push(c[2]);a=l.filter(function(a,c){return e[c]===b});return a.length?a[0]:d}function J(a,b){switch(I(a,b)){case "transform":return W(a,b);case "css":return C(a,b);case "attribute":return a.getAttribute(b)}return a[b]||0}function K(a,b){var d=/^(\*=|\+=|-=)/.exec(a);if(!d)return a;b=parseFloat(b);a=parseFloat(a.replace(d[0],""));switch(d[0][0]){case "+":return b+a;case "-":return b-a;case "*":return b*
-a}}function D(a){return g.obj(a)&&a.hasOwnProperty("totalLength")}function X(a,b){function d(c){c=void 0===c?0:c;return a.el.getPointAtLength(1<=b+c?b+c:0)}var c=d(),e=d(-1),l=d(1);switch(a.property){case "x":return c.x;case "y":return c.y;case "angle":return 180*Math.atan2(l.y-e.y,l.x-e.x)/Math.PI}}function L(a,b){var d=/-?\d*\.?\d+/g;a=D(a)?a.totalLength:a;if(g.col(a))b=g.rgb(a)?a:g.hex(a)?S(a):g.hsl(a)?T(a):void 0;else{var c=x(a);a=c?a.substr(0,a.length-c.length):a;b=b?a+b:a}b+="";return{original:b,
-numbers:b.match(d)?b.match(d).map(Number):[0],strings:b.split(d)}}function Y(a,b){return b.reduce(function(b,c,e){return b+a[e-1]+c})}function M(a){return(a?p(g.arr(a)?a.map(w):w(a)):[]).filter(function(a,d,c){return c.indexOf(a)===d})}function Z(a){var b=M(a);return b.map(function(a,c){return{target:a,id:c,total:b.length}})}function aa(a,b){var d=A(b);if(g.arr(a)){var c=a.length;2!==c||g.obj(a[0])?g.fnc(b.duration)||(d.duration=b.duration/c):a={value:a}}return w(a).map(function(a,c){c=c?0:b.delay;
-a=g.obj(a)&&!D(a)?a:{value:a};g.und(a.delay)&&(a.delay=c);return a}).map(function(a){return B(a,d)})}function ba(a,b){var d={},c;for(c in a){var e=H(a[c],b);g.arr(e)&&(e=e.map(function(a){return H(a,b)}),1===e.length&&(e=e[0]));d[c]=e}d.duration=parseFloat(d.duration);d.delay=parseFloat(d.delay);return d}function ca(a){return g.arr(a)?y.apply(this,a):N[a]}function da(a,b){var d;return a.tweens.map(function(c){c=ba(c,b);var e=c.value,l=J(b.target,a.name),h=d?d.to.original:l,h=g.arr(e)?e[0]:h,m=K(g.arr(e)?
-e[1]:e,h),l=x(m)||x(h)||x(l);c.isPath=D(e);c.from=L(h,l);c.to=L(m,l);c.start=d?d.end:a.offset;c.end=c.start+c.delay+c.duration;c.easing=ca(c.easing);c.elasticity=(1E3-Math.min(Math.max(c.elasticity,1),999))/1E3;g.col(c.from.original)&&(c.round=1);return d=c})}function ea(a,b){return p(a.map(function(a){return b.map(function(b){var c=I(a.target,b.name);if(c){var d=da(b,a);b={type:c,property:b.name,animatable:a,tweens:d,duration:d[d.length-1].end,delay:d[0].delay}}else b=void 0;return b})})).filter(function(a){return!g.und(a)})}
-function O(a,b,d){var c="delay"===a?Math.min:Math.max;return b.length?c.apply(Math,b.map(function(b){return b[a]})):d[a]}function fa(a){var b=G(ga,a),d=G(ha,a),c=Z(a.targets),e=[],g=B(b,d),h;for(h in a)g.hasOwnProperty(h)||"targets"===h||e.push({name:h,offset:g.offset,tweens:aa(a[h],d)});a=ea(c,e);return B(b,{children:[],animatables:c,animations:a,duration:O("duration",a,d),delay:O("delay",a,d)})}function n(a){function b(){return window.Promise&&new Promise(function(a){return Q=a})}function d(a){return f.reversed?
-f.duration-a:a}function c(a){for(var b=0,c={},d=f.animations,e={};b<d.length;){var g=d[b],h=g.animatable,m=g.tweens;e.tween=m.filter(function(b){return a<b.end})[0]||m[m.length-1];e.isPath$1=e.tween.isPath;e.round=e.tween.round;e.eased=e.tween.easing(Math.min(Math.max(a-e.tween.start-e.tween.delay,0),e.tween.duration)/e.tween.duration,e.tween.elasticity);m=Y(e.tween.to.numbers.map(function(a){return function(b,c){c=a.isPath$1?0:a.tween.from.numbers[c];b=c+a.eased*(b-c);a.isPath$1&&(b=X(a.tween.value,
-b));a.round&&(b=Math.round(b*a.round)/a.round);return b}}(e)),e.tween.to.strings);ia[g.type](h.target,g.property,m,c,h.id);g.currentValue=m;b++;e={isPath$1:e.isPath$1,tween:e.tween,eased:e.eased,round:e.round}}if(c)for(var k in c)E||(E=C(document.body,"transform")?"transform":"-webkit-transform"),f.animatables[k].target.style[E]=c[k].join(" ");f.currentTime=a;f.progress=a/f.duration*100}function e(a){if(f[a])f[a](f)}function g(){f.remaining&&!0!==f.remaining&&f.remaining--}function h(a){var h=f.duration,
-l=f.offset,n=f.delay,P=f.currentTime,q=f.reversed,r=d(a),r=Math.min(Math.max(r,0),h);if(f.children){var p=f.children;if(r>=f.currentTime)for(var u=0;u<p.length;u++)p[u].seek(r);else for(u=p.length;u--;)p[u].seek(r)}r>l&&r<h?(c(r),!f.began&&r>=n&&(f.began=!0,e("begin")),e("run")):(r<=l&&0!==P&&(c(0),q&&g()),r>=h&&P!==h&&(c(h),q||g()));a>=h&&(f.remaining?(t=m,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),"Promise"in window&&(Q(),R=b()),f.completed||(f.completed=!0,e("complete"))),
-k=0);e("update")}a=void 0===a?{}:a;var m,t,k=0,Q=null,R=b(),f=fa(a);f.reset=function(){var a=f.direction,b=f.loop;f.currentTime=0;f.progress=0;f.paused=!0;f.began=!1;f.completed=!1;f.reversed="reverse"===a;f.remaining="alternate"===a&&1===b?2:b;for(a=f.children.length;a--;)b=f.children[a],b.seek(b.offset),b.reset()};f.tick=function(a){m=a;t||(t=m);h((k+m-t)*n.speed)};f.seek=function(a){h(d(a))};f.pause=function(){var a=q.indexOf(f);-1<a&&q.splice(a,1);f.paused=!0};f.play=function(){f.paused&&(f.paused=
-!1,t=0,k=d(f.currentTime),q.push(f),z||ja())};f.reverse=function(){f.reversed=!f.reversed;t=0;k=d(f.currentTime)};f.restart=function(){f.pause();f.reset();f.play()};f.finished=R;f.reset();f.autoplay&&f.play();return f}var ga={update:void 0,begin:void 0,run:void 0,complete:void 0,loop:1,direction:"normal",autoplay:!0,offset:0},ha={duration:1E3,delay:0,easing:"easeOutElastic",elasticity:500,round:0},V="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),
-E,g={arr:function(a){return Array.isArray(a)},obj:function(a){return-1<Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||g.svg(a)},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)},col:function(a){return g.hex(a)||
-g.rgb(a)||g.hsl(a)}},y=function(){function a(a,d,c){return(((1-3*c+3*d)*a+(3*c-6*d))*a+3*d)*a}return function(b,d,c,e){if(0<=b&&1>=b&&0<=c&&1>=c){var g=new Float32Array(11);if(b!==d||c!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,c);return function(h){if(b===d&&c===e)return h;if(0===h)return 0;if(1===h)return 1;for(var m=0,k=1;10!==k&&g[k]<=h;++k)m+=.1;--k;var k=m+(h-g[k])/(g[k+1]-g[k])*.1,l=3*(1-3*c+3*b)*k*k+2*(3*c-6*b)*k+3*b;if(.001<=l){for(m=0;4>m;++m){l=3*(1-3*c+3*b)*k*k+2*(3*c-6*b)*k+3*b;if(0===l)break;
-var n=a(k,b,c)-h,k=k-n/l}h=k}else if(0===l)h=k;else{var k=m,m=m+.1,f=0;do n=k+(m-k)/2,l=a(n,b,c)-h,0<l?m=n:k=n;while(1e-7<Math.abs(l)&&10>++f);h=n}return a(h,d,e)}}}}(),N=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),d={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,
-.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},c={linear:y(.25,.25,.75,.75)},e={},l;for(l in d)e.type=l,d[e.type].forEach(function(a){return function(d,
-e){c["ease"+a.type+b[e]]=g.fnc(d)?d:y.apply($jscomp$this,d)}}(e)),e={type:e.type};return c}(),ia={css:function(a,b,d){return a.style[b]=d},attribute:function(a,b,d){return a.setAttribute(b,d)},object:function(a,b,d){return a[b]=d},transform:function(a,b,d,c,e){c[e]||(c[e]=[]);c[e].push(b+"("+d+")")}},q=[],z=0,ja=function(){function a(){z=requestAnimationFrame(b)}function b(b){var c=q.length;if(c){for(var d=0;d<c;)q[d]&&q[d].tick(b),d++;a()}else cancelAnimationFrame(z),z=0}return a}();n.version="2.0.2";
-n.speed=1;n.running=q;n.remove=function(a){a=M(a);for(var b=q.length;b--;)for(var d=q[b],c=d.animations,e=c.length;e--;)F(a,c[e].animatable.target)&&(c.splice(e,1),c.length||d.pause())};n.getValue=J;n.path=function(a,b){var d=g.str(a)?v(a)[0]:a,c=b||100;return function(a){return{el:d,property:a,totalLength:d.getTotalLength()*(c/100)}}};n.setDashoffset=function(a){var b=a.getTotalLength();a.setAttribute("stroke-dasharray",b);return b};n.bezier=y;n.easings=N;n.timeline=function(a){var b=n(a);b.pause();
-b.duration=0;b.add=function(a){b.children.forEach(function(a){a.began=!0;a.completed=!0});w(a).forEach(function(a){var c=b.duration,d=a.offset;a.autoplay=!1;a.offset=g.und(d)?c:K(d,c);b.seek(a.offset);a=n(a);a.duration>c&&(b.duration=a.duration);a.began=!0;b.children.push(a)});b.reset();b.seek(0);b.autoplay&&b.restart();return b};return b};n.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return n});
+(function(w,p){"function"===typeof define&&define.amd?define([],p):"object"===typeof module&&module.exports?module.exports=p():w.anime=p()})(this,function(){function w(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(c){}}function p(a){return a.reduce(function(a,d){return a.concat(g.arr(d)?p(d):d)},[])}function x(a){if(g.arr(a))return a;g.str(a)&&(a=w(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function H(a,c){return a.some(function(a){return a===c})}
+function B(a){var c={},d;for(d in a)c[d]=a[d];return c}function C(a,c){var d=B(a),b;for(b in a)d[b]=c.hasOwnProperty(b)?c[b]:a[b];return d}function y(a,c){var d=B(a),b;for(b in c)d[b]=g.und(a[b])?c[b]:a[b];return d}function W(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,c,d,h){return c+c+d+d+h+h});var c=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(c[1],16);var d=parseInt(c[2],16),c=parseInt(c[3],16);return"rgb("+a+","+d+","+c+")"}function X(a){function c(a,c,b){0>
+b&&(b+=1);1<b&&--b;return b<1/6?a+6*(c-a)*b:.5>b?c:b<2/3?a+(c-a)*(2/3-b)*6:a}var d=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(d[1])/360;var b=parseInt(d[2])/100,d=parseInt(d[3])/100;if(0==b)b=d=a=d;else{var e=.5>d?d*(1+b):d+b-d*b,k=2*d-e,b=c(k,e,a+1/3),d=c(k,e,a);a=c(k,e,a-1/3)}return"rgb("+255*b+","+255*d+","+255*a+")"}function v(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(a))return a[2]}function Y(a){if(-1<a.indexOf("translate")||
+"perspective"===a)return"px";if(-1<a.indexOf("rotate")||-1<a.indexOf("skew"))return"deg"}function I(a,c){return g.fnc(a)?a(c.target,c.id,c.total):a}function D(a,c){if(c in a.style)return getComputedStyle(a).getPropertyValue(c.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())||"0"}function J(a,c){if(g.dom(a)&&H(Z,c))return"transform";if(g.dom(a)&&(a.getAttribute(c)||g.svg(a)&&a[c]))return"attribute";if(g.dom(a)&&"transform"!==c&&D(a,c))return"css";if(null!=a[c])return"object"}function aa(a,c){var d=
+Y(c),d=-1<c.indexOf("scale")?1:0+d;a=a.style.transform;if(!a)return d;for(var b=[],e=[],k=[],h=/(\w+)\((.+?)\)/g;b=h.exec(a);)e.push(b[1]),k.push(b[2]);a=k.filter(function(a,b){return e[b]===c});return a.length?a[0]:d}function K(a,c){switch(J(a,c)){case "transform":return aa(a,c);case "css":return D(a,c);case "attribute":return a.getAttribute(c)}return a[c]||0}function L(a,c){var d=/^(\*=|\+=|-=)/.exec(a);if(!d)return a;var b=v(a)||0;c=parseFloat(c);a=parseFloat(a.replace(d[0],""));switch(d[0][0]){case "+":return c+
+a+b;case "-":return c-a+b;case "*":return c*a+b}}function E(a,c){return Math.sqrt(Math.pow(c.x-a.x,2)+Math.pow(c.y-a.y,2))}function M(a){a=a.points;for(var c=0,d,b=0;b<a.numberOfItems;b++){var e=a.getItem(b);0<b&&(c+=E(d,e));d=e}return c}function N(a){if(a.getTotalLength)return a.getTotalLength();switch(a.tagName.toLowerCase()){case "circle":return 2*Math.PI*a.getAttribute("r");case "rect":return 2*a.getAttribute("width")+2*a.getAttribute("height");case "line":return E({x:a.getAttribute("x1"),y:a.getAttribute("y1")},
+{x:a.getAttribute("x2"),y:a.getAttribute("y2")});case "polyline":return M(a);case "polygon":var c=a.points;return M(a)+E(c.getItem(c.numberOfItems-1),c.getItem(0))}}function F(a){return g.obj(a)&&a.hasOwnProperty("totalLength")}function ba(a,c){function d(b){b=void 0===b?0:b;return a.el.getPointAtLength(1<=c+b?c+b:0)}var b=d(),e=d(-1),k=d(1);switch(a.property){case "x":return b.x;case "y":return b.y;case "angle":return 180*Math.atan2(k.y-e.y,k.x-e.x)/Math.PI}}function O(a,c){var d=/-?\d*\.?\d+/g,
+b;b=F(a)?a.totalLength:a;if(g.col(b))b=g.rgb(b)?b:g.hex(b)?W(b):g.hsl(b)?X(b):void 0;else{var e=v(b),e=e?b.substr(0,b.length-e.length):b;b=c&&!/\s/g.test(b)?e+c:e}b+="";return{original:b,numbers:b.match(d)?b.match(d).map(Number):[0],strings:g.str(a)||c?b.split(d):[]}}function ca(a,c){return 0===c.length?a[0]:c.reduce(function(c,b,e){return c+a[e-1]+(b?b:" ")})}function P(a){return(a?p(g.arr(a)?a.map(x):x(a)):[]).filter(function(a,d,b){return b.indexOf(a)===d})}function da(a){var c=P(a);return c.map(function(a,
+b){return{target:a,id:b,total:c.length}})}function ea(a,c){var d=B(c);if(g.arr(a)){var b=a.length;2!==b||g.obj(a[0])?g.fnc(c.duration)||(d.duration=c.duration/b):a={value:a}}return x(a).map(function(a,b){b=b?0:c.delay;a=g.obj(a)&&!F(a)?a:{value:a};g.und(a.delay)&&(a.delay=b);return a}).map(function(a){return y(a,d)})}function fa(a,c){var d={},b;for(b in a){var e=I(a[b],c);g.arr(e)&&(e=e.map(function(a){return I(a,c)}),1===e.length&&(e=e[0]));d[b]=e}d.duration=parseFloat(d.duration);d.delay=parseFloat(d.delay);
+return d}function ga(a){return g.arr(a)?z.apply(this,a):Q[a]}function ha(a,c){var d;return a.tweens.map(function(b){b=fa(b,c);var e=b.value,k=K(c.target,a.name),h=d?d.to.original:k,h=g.arr(e)?e[0]:h,m=L(g.arr(e)?e[1]:e,h),k=v(m)||v(h)||v(k);b.isPath=F(e);b.from=O(h,k);b.to=O(m,k);b.start=d?d.end:a.offset;b.end=b.start+b.delay+b.duration;b.easing=ga(b.easing);b.elasticity=(1E3-Math.min(Math.max(b.elasticity,1),999))/1E3;g.col(b.from.original)&&(b.round=1);return d=b})}function ia(a,c){return p(a.map(function(a){return c.map(function(b){var c=
+J(a.target,b.name);if(c){var d=ha(b,a);b={type:c,property:b.name,animatable:a,tweens:d,duration:d[d.length-1].end,delay:d[0].delay}}else b=void 0;return b})})).filter(function(a){return!g.und(a)})}function R(a,c,d){var b="delay"===a?Math.min:Math.max;return c.length?b.apply(Math,c.map(function(b){return b[a]})):d[a]}function ja(a){var c=C(ka,a),d=C(S,a),b=da(a.targets),e=[],g=y(c,d),h;for(h in a)g.hasOwnProperty(h)||"targets"===h||e.push({name:h,offset:g.offset,tweens:ea(a[h],d)});a=ia(b,e);return y(c,
+{children:[],animatables:b,animations:a,duration:R("duration",a,d),delay:R("delay",a,d)})}function n(a){function c(){return window.Promise&&new Promise(function(a){return U=a})}function d(a){return f.reversed?f.duration-a:a}function b(a){for(var b=0,c={},d=f.animations,e={};b<d.length;){var g=d[b],h=g.animatable,m=g.tweens;e.tween=m.filter(function(b){return a<b.end})[0]||m[m.length-1];m=Math.min(Math.max(a-e.tween.start-e.tween.delay,0),e.tween.duration)/e.tween.duration;e.eased=isNaN(m)?1:e.tween.easing(m,
+e.tween.elasticity);e.round=e.tween.round;m=ca(e.tween.to.numbers.map(function(a){return function(b,c){c=a.tween.from.numbers[c];b=c+a.eased*(b-c);a.tween.isPath&&(b=ba(a.tween.value,b));a.round&&(b=Math.round(b*a.round)/a.round);return b}}(e)),e.tween.to.strings);la[g.type](h.target,g.property,m,c,h.id);g.currentValue=m;b++;e={tween:e.tween,eased:e.eased,round:e.round}}if(c)for(var l in c)G||(G=D(document.body,"transform")?"transform":"-webkit-transform"),f.animatables[l].target.style[G]=c[l].join(" ");
+f.currentTime=a;f.progress=a/f.duration*100}function e(a){if(f[a])f[a](f)}function g(){f.remaining&&!0!==f.remaining&&f.remaining--}function h(a){var h=f.duration,k=f.offset,n=f.delay,T=f.currentTime,q=f.reversed,r=d(a);if(f.children.length){var p=f.children;if(r>=f.currentTime)for(var u=0;u<p.length;u++)p[u].seek(r);else for(u=p.length;u--;)p[u].seek(r)}r>=n&&(e("run"),f.began||(f.began=!0,e("begin")));r>k&&r<h?b(r):(r<=k&&0!==T&&(b(0),q&&g()),r>=h&&T!==h&&(b(h),q||g()));e("update");a>=h&&(f.remaining?
+(t=m,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),f.completed||(f.completed=!0,e("complete"),"Promise"in window&&(U(),V=c()))),l=0)}a=void 0===a?{}:a;var m,t,l=0,U=null,V=c(),f=ja(a);f.reset=function(){var a=f.direction,c=f.loop;f.currentTime=0;f.progress=0;f.paused=!0;f.began=!1;f.completed=!1;f.reversed="reverse"===a;f.remaining="alternate"===a&&1===c?2:c;b(0);for(a=f.children.length;a--;)f.children[a].reset()};f.tick=function(a){m=a;t||(t=m);h((l+m-t)*n.speed)};f.seek=function(a){h(d(a))};
+f.pause=function(){var a=q.indexOf(f);-1<a&&q.splice(a,1);f.paused=!0};f.play=function(){f.paused&&(f.paused=!1,t=0,l=d(f.currentTime),q.push(f),A||ma())};f.reverse=function(){f.reversed=!f.reversed;t=0;l=d(f.currentTime)};f.restart=function(){f.pause();f.reset();f.play()};f.finished=V;f.reset();f.autoplay&&f.play();return f}var ka={update:void 0,begin:void 0,run:void 0,complete:void 0,loop:1,direction:"normal",autoplay:!0,offset:0},S={duration:1E3,delay:0,easing:"easeOutElastic",elasticity:500,round:0},
+Z="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY perspective".split(" "),G,g={arr:function(a){return Array.isArray(a)},obj:function(a){return-1<Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||g.svg(a)},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},
+rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)},col:function(a){return g.hex(a)||g.rgb(a)||g.hsl(a)}},z=function(){function a(a,d,b){return(((1-3*b+3*d)*a+(3*b-6*d))*a+3*d)*a}return function(c,d,b,e){if(0<=c&&1>=c&&0<=b&&1>=b){var g=new Float32Array(11);if(c!==d||b!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,c,b);return function(h){if(c===d&&b===e)return h;if(0===h)return 0;if(1===h)return 1;for(var m=0,l=1;10!==l&&g[l]<=h;++l)m+=.1;--l;var l=m+(h-g[l])/(g[l+1]-g[l])*.1,k=3*(1-
+3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(.001<=k){for(m=0;4>m;++m){k=3*(1-3*b+3*c)*l*l+2*(3*b-6*c)*l+3*c;if(0===k)break;var n=a(l,c,b)-h,l=l-n/k}h=l}else if(0===k)h=l;else{var l=m,m=m+.1,f=0;do n=l+(m-l)/2,k=a(n,c,b)-h,0<k?m=n:l=n;while(1e-7<Math.abs(k)&&10>++f);h=n}return a(h,d,e)}}}}(),Q=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var c="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),d={In:[[.55,.085,.68,
+.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/
+2:1-a(-2*b+2,c)/2}]},b={linear:z(.25,.25,.75,.75)},e={},k;for(k in d)e.type=k,d[e.type].forEach(function(a){return function(d,e){b["ease"+a.type+c[e]]=g.fnc(d)?d:z.apply($jscomp$this,d)}}(e)),e={type:e.type};return b}(),la={css:function(a,c,d){return a.style[c]=d},attribute:function(a,c,d){return a.setAttribute(c,d)},object:function(a,c,d){return a[c]=d},transform:function(a,c,d,b,e){b[e]||(b[e]=[]);b[e].push(c+"("+d+")")}},q=[],A=0,ma=function(){function a(){A=requestAnimationFrame(c)}function c(c){var b=
+q.length;if(b){for(var d=0;d<b;)q[d]&&q[d].tick(c),d++;a()}else cancelAnimationFrame(A),A=0}return a}();n.version="2.1.0";n.speed=1;n.running=q;n.remove=function(a){a=P(a);for(var c=q.length;c--;)for(var d=q[c],b=d.animations,e=b.length;e--;)H(a,b[e].animatable.target)&&(b.splice(e,1),b.length||d.pause())};n.getValue=K;n.path=function(a,c){var d=g.str(a)?w(a)[0]:a,b=c||100;return function(a){return{el:d,property:a,totalLength:N(d)*(b/100)}}};n.setDashoffset=function(a){var c=N(a);a.setAttribute("stroke-dasharray",
+c);return c};n.bezier=z;n.easings=Q;n.timeline=function(a){var c=n(a);c.pause();c.duration=0;c.add=function(d){c.children.forEach(function(a){a.began=!0;a.completed=!0});x(d).forEach(function(b){var d=y(b,C(S,a||{}));d.targets=d.targets||a.targets;b=c.duration;var k=d.offset;d.autoplay=!1;d.offset=g.und(k)?b:L(k,b);c.began=!0;c.completed=!0;c.seek(d.offset);d=n(d);d.began=!0;d.completed=!0;d.duration>b&&(c.duration=d.duration);c.children.push(d)});c.seek(0);c.reset();c.autoplay&&c.restart();return c};
+return c};n.random=function(a,c){return Math.floor(Math.random()*(c-a+1))+a};return n});

package.json

 {
   "name": "animejs",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "JavaScript animation engine",
@@ -24,3 +24,3 @@ "main": "anime.min.js",
   },
-  "homepage": "http://anime-js.com",
+  "homepage": "http://animejs.com",
   "files": [
@@ -30,5 +30,5 @@ "anime.js",
   ],
-  "dependencies": {
+  "devDependencies": {
     "google-closure-compiler-js": "^20170124.0.0"
   }
 }

README.md

@@ -1,4 +0,4 @@
-# [anime.js](http://anime-js.com) ![](http://img.badgesize.io/juliangarnier/anime/v2.0/anime.min.js.svg?style=flat&color=18FF92)
+# [anime.js](http://animejs.com) ![](http://img.badgesize.io/juliangarnier/anime/v2.0/anime.min.js.svg?style=flat&color=18FF92)
 
-<img src="http://anime-js.com/documentation/assets/img/readme/animejs-logo.gif" width="100%" />
+<img src="http://animejs.com/documentation/assets/img/readme/animejs-logo.gif" width="100%" />
 
@@ -23,3 +23,3 @@ >*Anime* `(/ˈæn.ə.meɪ/)` is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.
 * [juliangarnier.com](http://juliangarnier.com)
-* [anime-js.com](http://anime-js.com)
+* [animejs.com](http://animejs.com)
 * [kenzo.com/en/thejunglebook](https://kenzo.com/en/thejunglebook)
@@ -76,3 +76,3 @@ * [Stress test](http://codepen.io/juliangarnier/pen/9aea7f045d7db301eab41bc09dcfc04d?editors=0010)
 | --- | ---
-| CSS Selectors | `'div'`, `'.item'`, `'path'`
+| CSS Selectors | `'div'`, `'.item'`, `'path'`, `'#el path'` ...
 | DOM Element | `document.querySelector('.item')`
@@ -83,3 +83,3 @@ | NodeList | `document.querySelectorAll('.item')`
 
-➜ [Targets examples](http://anime-js.com/documentation/#cssSelector)
+➜ [Targets examples](http://animejs.com/documentation/#cssSelector)
 
@@ -96,7 +96,7 @@ ## Animatable properties
 
-➜ [Animatable properties examples](http://anime-js.com/documentation/#cssProperties)
+➜ [Animatable properties examples](http://animejs.com/documentation/#cssProperties)
 
 ### CSS
 
-<img src="http://anime-js.com/documentation/assets/img/readme/prop-css.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-css.gif" width="332" />
 
@@ -114,7 +114,7 @@ Any CSS properties can be animated:
 
-➜ [CSS properties example](http://anime-js.com/documentation/#cssProperties)
+➜ [CSS properties example](http://animejs.com/documentation/#cssProperties)
 
 ### Individual CSS transforms
 
-<img src="http://anime-js.com/documentation/assets/img/readme/prop-transforms.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-transforms.gif" width="332" />
 
@@ -127,3 +127,3 @@ CSS transforms can be animated individually:
   translateX: 250, // Animate all divs translateX property to 250px
-  scale: 2, // Animate all divs scale to 1.5
+  scale: 2, // Animate all divs scale to 2
   rotate: '1turn' // Animate all divs rotation to 1 turn
@@ -133,7 +133,7 @@ });
 
-➜ [CSS Transforms example](http://anime-js.com/documentation/#CSStransforms)
+➜ [CSS Transforms example](http://animejs.com/documentation/#CSStransforms)
 
 ### JavaScript Object properties
 
-<img src="http://anime-js.com/documentation/assets/img/readme/prop-js-obj.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-js-obj.gif" width="332" />
 
@@ -155,7 +155,7 @@ Any `Object` property containing a numerical value can be animated:
 
-➜ [Object properties example](http://anime-js.com/documentation/#JSobjectProp)
+➜ [Object properties example](http://animejs.com/documentation/#JSobjectProp)
 
 ### DOM Attributes
 
-<img src="http://anime-js.com/documentation/assets/img/readme/prop-dom-attr.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-dom-attr.gif" width="332" />
 
@@ -176,7 +176,7 @@ Any DOM Attribute containing a numerical values can be animated:
 
-➜ [DOM Attributes example](http://anime-js.com/documentation/#domAttributes)
+➜ [DOM Attributes example](http://animejs.com/documentation/#domAttributes)
 
 ### SVG Attributes
 
-<img src="http://anime-js.com/documentation/assets/img/readme/prop-svg-attr.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-svg-attr.gif" width="332" />
 
@@ -198,7 +198,7 @@ Any SVG Attribute containing a numerical values can be animated:
 
-➜ [SVG Attributes example](http://anime-js.com/documentation/#svgAttributes)
+➜ [SVG Attributes example](http://animejs.com/documentation/#svgAttributes)
 
 ## Property parameters
 
-<img src="http://anime-js.com/documentation/assets/img/readme/prop-parameters.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/prop-parameters.gif" width="332" />
 
@@ -237,7 +237,7 @@ Defines duration, delay and easing for each property animations.<br>
 
-➜ [Property parameters examples](http://anime-js.com/documentation/#duration)
+➜ [Property parameters examples](http://animejs.com/documentation/#duration)
 
 ## Function based property parameters
 
-<img src="http://anime-js.com/documentation/assets/img/readme/fb-parameters.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/fb-parameters.gif" width="332" />
 
@@ -250,3 +250,2 @@ Get different property parameters for every target of the animation.<br>
   targets: 'div',
-  translateX: 100,
   translateX: 250,
@@ -269,7 +268,7 @@ rotate: 180,
 
-➜ [Function based parameters examples](http://anime-js.com/documentation/#functionBasedDuration)
+➜ [Function based parameters examples](http://animejs.com/documentation/#functionBasedDuration)
 
 ## Animation parameters
 
-<img src="http://anime-js.com/documentation/assets/img/readme/anim-parameters.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/anim-parameters.gif" width="332" />
 
@@ -290,3 +289,3 @@ Parameters relative to the animation to specify the direction, the number of loops or autoplay.
   loop: 3, // Play the animation 3 times
-  direction: 'reverse' // Play the animation in reverse
+  direction: 'reverse', // Play the animation in reverse
   autoplay: false // Animation paused by default
@@ -296,3 +295,3 @@ });
 
-➜ [Animation parameters examples](http://anime-js.com/documentation/#alternate)
+➜ [Animation parameters examples](http://animejs.com/documentation/#alternate)
 
@@ -309,7 +308,7 @@ ## Property values
 | Number | `100` | Automatically add original or default unit if needed
-| String | `'10em'`, `'1turn'`, `'M21 1v160'` | Must contains at least one numerical value
+| String | `'10em'`, `'1turn'`, `'M21 1v160'`, `'50%'` | Must contains at least one numerical value
 | Relative values | `'+=100px'`, `'-=20em'`, `'*=4'` | Add, subtract or multiply the original property value
 | Colors | `'#FFF'`, `'rgb(255,0,0)'`, `'hsl(100, 20%, 80%)'` | Accepts 3 or 6 hex digit, rgb, or hsl values
 
-➜ [Values examples](http://anime-js.com/documentation/#unitlessValue)
+➜ [Values examples](http://animejs.com/documentation/#unitlessValue)
 
@@ -329,3 +328,3 @@ ```javascript
 
-<img src="http://anime-js.com/documentation/assets/img/readme/value-from-to.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/value-from-to.gif" width="332" />
 
@@ -345,10 +344,10 @@ Force the animation to start at a certain value.
 
-➜ [Specific initial value example](http://anime-js.com/documentation/#specificInitialValue)
+➜ [Specific initial value example](http://animejs.com/documentation/#specificInitialValue)
 
 ### Function based values
 
-<img src="http://anime-js.com/documentation/assets/img/readme/value-fb.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/value-fb.gif" width="332" />
 
 Same as [function based property parameters](#function-based-property-parameters).<br>
-Get different values for every target of the animation.<br>
+Get different values for every target and property of the animation.<br>
 The function accepts 3 arguments: `target`, `index`, `targetsLength`.
@@ -369,3 +368,2 @@
   rotate: function() { return anime.random(-360, 360); },
-  duration: function() { return anime.random(1200, 1800); },
   duration: function() { return anime.random(800, 1600); },
@@ -376,7 +374,7 @@ delay: function() { return anime.random(0, 1000); }
 
-➜ [Function based value example](http://anime-js.com/documentation/#functionBasedPropVal)
+➜ [Function based value example](http://animejs.com/documentation/#functionBasedPropVal)
 
 ### Keyframes
 
-<img src="http://anime-js.com/documentation/assets/img/readme/value-keyframes.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/value-keyframes.gif" width="332" />
 
@@ -414,3 +412,3 @@ Keyframes are defined using an `Array` of property Object.<br>
 
-➜ [Specific keyframes properties example](http://anime-js.com/documentation/#keyframes)
+➜ [Specific keyframes properties example](http://animejs.com/documentation/#keyframes)
 
@@ -421,3 +419,3 @@ ## Timeline
 
-<img src="http://anime-js.com/documentation/assets/img/readme/timeline.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/timeline.gif" width="332" />
 
@@ -460,3 +458,3 @@ Play animations in sequence by creating a timeline:
 
-➜ [Basic timeline example](http://anime-js.com/documentation/#basicTimeline)
+➜ [Basic timeline example](http://animejs.com/documentation/#basicTimeline)
 
@@ -469,11 +467,11 @@ ### Timeline animations offsets
 
-<img src="http://anime-js.com/documentation/assets/img/readme/timeline-relative.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/timeline-relative.gif" width="332" />
 
 Defines starting time relative to the previous animations duration.
 
-| Types | Examples | Infos 
-| --- | --- | --- 
-| `+=` | `'+=100'` | Starts 100ms after the previous animation ends 
-| `-=` | `'-=100'` | Starts 100ms before the previous animation ends 
-| `*=` | `'*=2'` | Starts at 2 times the previous animations duration 
+| Types | Examples | Infos
+| --- | --- | ---
+| `+=` | `'+=100'` | Starts 100ms after the previous animation ends
+| `-=` | `'-=100'` | Starts 100ms before the previous animation ends
+| `*=` | `'*=2'` | Starts at 2 times the previous animations duration
 
@@ -498,7 +496,7 @@ ```javascript
 
-➜ [Relative offset example](http://anime-js.com/documentation/#relativeOffset)
+➜ [Relative offset example](http://animejs.com/documentation/#relativeOffset)
 
 #### Absolute offset
 
-<img src="http://anime-js.com/documentation/assets/img/readme/timeline-absolute.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/timeline-absolute.gif" width="332" />
 
@@ -526,3 +524,3 @@ Defines an absolute starting time on the timeline with a number.
 
-➜ [Absolute offset example](http://anime-js.com/documentation/absoluteOffset)
+➜ [Absolute offset example](http://animejs.com/documentation/absoluteOffset)
 
@@ -535,3 +533,3 @@ ## Playback controls
 
-<img src="http://anime-js.com/documentation/assets/img/readme/playback-play-pause.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/playback-play-pause.gif" width="332" />
 
@@ -551,7 +549,7 @@ ```javascript
 
-➜ [Play / Pause example](http://anime-js.com/documentation/#playPause)
+➜ [Play / Pause example](http://animejs.com/documentation/#playPause)
 
 ### Restart
 
-<img src="http://anime-js.com/documentation/assets/img/readme/playback-restart.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/playback-restart.gif" width="332" />
 
@@ -570,10 +568,10 @@ ```javascript
 
-➜ [Restart example](http://anime-js.com/documentation/#restartAnim)
+➜ [Restart example](http://animejs.com/documentation/#restartAnim)
 
 ### Reverse
 
-<img src="http://anime-js.com/documentation/assets/img/readme/playback-reverse.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/playback-reverse.gif" width="332" />
 
 ```javascript
-var restartAnim = anime({
+var reverseAnim = anime({
   targets: 'div',
@@ -585,10 +583,10 @@ translateX: 250,
 
-restartAnim.reverse(); // Change the animation direction
+reverseAnim.reverse(); // Change the animation direction
 ```
 
-➜ [Reverse example](http://anime-js.com/documentation/#reverseAnim)
+➜ [Reverse example](http://animejs.com/documentation/#reverseAnim)
 
 ### Seek
 
-<img src="http://anime-js.com/documentation/assets/img/readme/playback-seek.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/playback-seek.gif" width="332" />
 
@@ -609,7 +607,7 @@ Change animations or timelines current time.
 
-➜ [Seek example](http://anime-js.com/documentation/#seekAnim)
+➜ [Seek example](http://animejs.com/documentation/#seekAnim)
 
 ## Callbacks
 
-<img src="http://anime-js.com/documentation/assets/img/readme/callbacks-all.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/callbacks-all.gif" width="332" />
 
@@ -624,3 +622,3 @@ Execute a function at the beginning, during or when an animation or timeline is completed.
 
-➜ [Callbacks examples](http://anime-js.com/documentation/#allCallbacks)
+➜ [Callbacks examples](http://animejs.com/documentation/#allCallbacks)
 
@@ -633,3 +631,3 @@ ### Update
 var myAnimation = anime({
-  targets: '#callbacks .el',
+  targets: '#update .el',
   translateX: 250,
@@ -644,3 +642,3 @@ delay: 1000,
 
-➜ [Update example](http://anime-js.com/documentation/#update)
+➜ [Update example](http://animejs.com/documentation/#update)
 
@@ -664,3 +662,3 @@ ### Begin
 
-➜ [Begin example](http://anime-js.com/documentation/#begin)
+➜ [Begin example](http://animejs.com/documentation/#begin)
 
@@ -673,3 +671,3 @@ ### Run
 var myAnimation = anime({
-  targets: '#begin .el',
+  targets: '#run .el',
   translateX: 250,
@@ -683,3 +681,3 @@ delay: 1000,
 
-➜ [Run example](http://anime-js.com/documentation/#run)
+➜ [Run example](http://animejs.com/documentation/#run)
 
@@ -694,3 +692,3 @@ ### Complete
   translateX: 250,
-  Complete: function(anim) {
+  complete: function(anim) {
     console.log(anim.completed);
@@ -703,3 +701,3 @@ }
 
-➜ [Complete example](http://anime-js.com/documentation/#complete)
+➜ [Complete example](http://animejs.com/documentation/#complete)
 
@@ -710,3 +708,3 @@ ## Promises
 
-➜ [Promises example](http://anime-js.com/documentation/#finishedPromise)
+➜ [Promises example](http://animejs.com/documentation/#finishedPromise)
 
@@ -717,3 +715,3 @@ ## SVG
 
-<img src="http://anime-js.com/documentation/assets/img/readme/svg-motion-path.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/svg-motion-path.gif" width="332" />
 
@@ -734,7 +732,7 @@ Translate and rotate DOM elements along an SVG path:
 
-➜ [Motion path example](http://anime-js.com/documentation/#motionPath)
+➜ [Motion path example](http://animejs.com/documentation/#motionPath)
 
 ### Morphing
 
-<img src="http://anime-js.com/documentation/assets/img/readme/svg-morphing.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/svg-morphing.gif" width="332" />
 
@@ -744,3 +742,3 @@ Animate the transition between two SVG shapes:
 ```html
-<svg class=".shape" width="128" height="128" viewBox="0 0 128 128">
+<svg class="shape" width="128" height="128" viewBox="0 0 128 128">
   <polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100"></polygon>
@@ -759,7 +757,7 @@ </svg>
 
-➜ [Morphing example](http://anime-js.com/documentation/#morphing)
+➜ [Morphing example](http://animejs.com/documentation/#morphing)
 
 ### Line drawing
 
-<img src="http://anime-js.com/documentation/assets/img/readme/svg-line-drawing.gif" width="332" />
+<img src="http://animejs.com/documentation/assets/img/readme/svg-line-drawing.gif" width="332" />
 
@@ -771,7 +769,7 @@ Line drawing animation of an SVG shape:
   targets: '.shape path',
-	strokeDashoffset: [anime.setDashoffset, 0]
+  strokeDashoffset: [anime.setDashoffset, 0]
 });
 ```
 
-➜ [Line drawing example](http://anime-js.com/documentation/#lineDrawing)
+➜ [Line drawing example](http://animejs.com/documentation/#lineDrawing)
 
@@ -805,3 +803,3 @@ ## Easing functions
 
-➜ [Built in easing functions examples](http://anime-js.com/documentation/#penner)
+➜ [Built in easing functions examples](http://animejs.com/documentation/#penner)
 
@@ -813,4 +811,4 @@ Usage:
   targets: 'div',
-	translateX: 100,
-	easing: 'easeOutExpo' // Default 'easeOutElastic'
+  translateX: 100,
+  easing: 'easeOutExpo' // Default 'easeOutElastic'
 });
@@ -824,9 +822,9 @@ ```
   targets: 'div',
-	translateX: 100,
-	easing: 'easeOutElastic',
-	elasticity: 600 // Default 500, range [0-1000]
+  translateX: 100,
+  easing: 'easeOutElastic',
+  elasticity: 600 // Default 500, range [0-1000]
 });
 ```
 
-➜ [Elasticity examples](http://anime-js.com/documentation/#elasticity)
+➜ [Elasticity examples](http://animejs.com/documentation/#elasticity)
 
@@ -840,10 +838,10 @@ ### Custom Bézier curves
   targets: 'div',
-	translateX: 100,
-	easing: [.91,-0.54,.29,1.56],
+  translateX: 100,
+  easing: [.91,-0.54,.29,1.56]
 });
 ```
 
-Custom Bézier curves coordinates can be generated here https://matthewlein.com/ceaser/
+Custom Bézier curves coordinates can be generated here <https://matthewlein.com/ceaser/>
 
-➜ [Custom Bézier curves example](http://anime-js.com/documentation/#customBezier)
+➜ [Custom Bézier curves example](http://animejs.com/documentation/#customBezier)
 
@@ -863,4 +861,4 @@ ### Defining custom functions
   targets: 'div',
-	translateX: 100,
-	easing: 'myCustomEasingName'
+  translateX: 100,
+  easing: 'myCustomEasingName'
 });
@@ -874,8 +872,8 @@
   targets: 'div',
-	translateX: 100,
-	easing: 'myCustomCurve'
+  translateX: 100,
+  easing: 'myCustomCurve'
 });
 ```
 
-➜ [Custom easing functions example](http://anime-js.com/documentation/#customEasingFunction)
+➜ [Custom easing functions example](http://animejs.com/documentation/#customEasingFunction)
 
@@ -905,3 +903,3 @@ ## Helpers
 ```javascript
-anime.remove('.item-2'); // Remove all divs with the class '.item-2'
+anime.remove('.item-2'); // Remove all elements with the class 'item-2'
 ```
@@ -926,3 +924,3 @@
 
-➜ [Motion path example](http://anime-js.com/documentation/#motionPath)
+➜ [Motion path example](http://animejs.com/documentation/#motionPath)
 
@@ -937,7 +935,7 @@ ### anime.setDashoffset(pathEl)
   targets: '.shape path',
-	strokeDashoffset: [anime.pathDashoffset, 0]
+  strokeDashoffset: [anime.pathDashoffset, 0]
 });
 ```
 
-➜ [Line drawing example](http://anime-js.com/documentation/#lineDrawing)
+➜ [Line drawing example](http://animejs.com/documentation/#lineDrawing)
 
@@ -969,3 +967,3 @@ ### anime.easings
 
-➜ [Timeline examples](http://anime-js.com/documentation/#basicTimeline)
+➜ [Timeline examples](http://animejs.com/documentation/#basicTimeline)
 
@@ -984,2 +982,2 @@ ### anime.random(x, y)
 
-Thanks to [Animate Plus](https://github.com/bendc/animateplus) and [Velocity](https://github.com/julianshapiro/velocity) that inspired `anime.js` API, [BezierEasing](https://github.com/gre/bezier-easing) and [jQuery UI](https://jqueryui.com/) for the easing system. [Tim Branyen](https://github.com/tbranyen) For the Promise implementation. 
+Thanks to [Animate Plus](https://github.com/bendc/animateplus) and [Velocity](https://github.com/julianshapiro/velocity) that inspired `anime.js` API, [BezierEasing](https://github.com/gre/bezier-easing) and [jQuery UI](https://jqueryui.com/) for the easing system. [Tim Branyen](https://github.com/tbranyen) For the Promise implementation.

No alert changes

Improved metrics

Total package byte prevSize

67495

increased by3.7%

Dependency count

0

decreased by-100%

Lines of code

853

increased by5.83%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Number of lines in readme file

928

decreased by-0.22%

Dependency changes

• - Removedgoogle-closure-compiler-js@^20170124.0.0

• - Removedamdefine@1.0.1(transitive)

• - Removedansi-gray@0.1.1(transitive)

• - Removedansi-regex@2.1.1(transitive)

• - Removedansi-styles@2.2.1(transitive)

• - Removedansi-wrap@0.1.0(transitive)

• - Removedarray-differ@1.0.0(transitive)

• - Removedarray-uniq@1.0.3(transitive)

• - Removedbeeper@1.1.1(transitive)

• - Removedchalk@1.1.3(transitive)

• - Removedclone@1.0.4(transitive)

• - Removedclone-stats@0.0.1(transitive)

• - Removedcolor-support@1.1.3(transitive)

• - Removedcore-util-is@1.0.3(transitive)

• - Removeddateformat@2.2.0(transitive)

• - Removedduplexer2@0.0.2(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedfancy-log@1.3.3(transitive)

• - Removedglogg@1.0.2(transitive)

• - Removedgoogle-closure-compiler-js@20170124.0.0(transitive)

• - Removedgulp-util@3.0.8(transitive)

• - Removedgulplog@1.0.0(transitive)

• - Removedhas-ansi@2.0.0(transitive)

• - Removedhas-gulplog@0.1.0(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedisarray@0.0.11.0.0(transitive)

• - Removedlodash._basecopy@3.0.1(transitive)

• - Removedlodash._basetostring@3.0.1(transitive)

• - Removedlodash._basevalues@3.0.0(transitive)

• - Removedlodash._getnative@3.9.1(transitive)

• - Removedlodash._isiterateecall@3.0.9(transitive)

• - Removedlodash._reescape@3.0.0(transitive)

• - Removedlodash._reevaluate@3.0.0(transitive)

• - Removedlodash._reinterpolate@3.0.0(transitive)

• - Removedlodash._root@3.0.1(transitive)

• - Removedlodash.escape@3.2.0(transitive)

• - Removedlodash.isarguments@3.1.0(transitive)

• - Removedlodash.isarray@3.0.4(transitive)

• - Removedlodash.keys@3.1.2(transitive)

• - Removedlodash.restparam@3.6.1(transitive)

• - Removedlodash.template@3.6.2(transitive)

• - Removedlodash.templatesettings@3.1.1(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmultipipe@0.1.2(transitive)

• - Removedobject-assign@3.0.0(transitive)

• - Removedparse-node-version@1.0.1(transitive)

• - Removedprocess-nextick-args@2.0.1(transitive)

• - Removedreadable-stream@1.1.142.3.8(transitive)

• - Removedreplace-ext@0.0.1(transitive)

• - Removedsafe-buffer@5.1.2(transitive)

• - Removedsource-list-map@0.1.8(transitive)

• - Removedsource-map@0.4.4(transitive)

• - Removedsparkles@1.0.1(transitive)

• - Removedstring_decoder@0.10.311.1.1(transitive)

• - Removedstrip-ansi@3.0.1(transitive)

• - Removedsupports-color@2.0.0(transitive)

• - Removedthrough2@2.0.5(transitive)

• - Removedtime-stamp@1.1.0(transitive)

• - Removedutil-deprecate@1.0.2(transitive)

• - Removedvinyl@0.5.3(transitive)

• - Removedwebpack-core@0.6.9(transitive)

• - Removedxtend@4.0.2(transitive)