From 0938ad6f40acfb9ffafb059e364a6de467a89be6 Mon Sep 17 00:00:00 2001
From: Tobias K <nox@raynode.de>
Date: Sat, 19 Jan 2019 21:58:50 +0100
Subject: [PATCH 01/34] fixed value in documentation

---
 documentation/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/index.html b/documentation/index.html
index a7824b73..c2d1e774 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -2460,7 +2460,7 @@ <h3 class="demo-title">Time Offsets</h3>
 .add({
   targets: '.offsets-demo .el.triangle',
   translateX: 250,
-}, 0); // absolute offset
+}, 400); // absolute offset
 
 /*DEMO*/
 }

From 357678e4b9f542b55614705d0d294fe262cfc238 Mon Sep 17 00:00:00 2001
From: Nick Pannuto <sneakyness@sneakyness.com>
Date: Thu, 24 Jan 2019 01:47:58 -0500
Subject: [PATCH 02/34] degres -> degrees

Small typo
---
 documentation/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/index.html b/documentation/index.html
index a7824b73..fe3b3702 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -3215,7 +3215,7 @@ <h3 class="demo-title">Motion path</h3>
       <tr>
         <td><code>'angle'</code></td>
         <td><code>myPath('angle')</code></td>
-        <td>Return the current angle value in <code>'degres'</code> of the SVG path</td>
+        <td>Return the current angle value in <code>'degrees'</code> of the SVG path</td>
       </tr>
     </table>
   </div>

From 52d83ea6499fac19123905cd615b4c101346d61d Mon Sep 17 00:00:00 2001
From: ItsJonQ <itsjonq@gmail.com>
Date: Sun, 27 Jan 2019 10:10:39 -0500
Subject: [PATCH 03/34] README: Update import/require path in examples

This update fixes the import/require paths for the `animejs` module when
using it from `node_modules`.

Since the paths are defined in `package.json`, node will use
`node_modules/animejs/lib` as the root :)
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 3719dbac..11ac71a8 100644
--- a/README.md
+++ b/README.md
@@ -37,13 +37,13 @@ or manual [download](https://github.com/juliangarnier/anime/archive/master.zip).
 #### ES6 modules
 
 ```javascript
-import anime from 'lib/anime.es.js';
+import anime from 'anime';
 ```
 
 #### CommonJS
 
 ```javascript
-const anime = require('lib/anime.js');
+const anime = require('anime');
 ```
 
 #### File include

From 8fc492ac7b956e54eee3280d2fa710a126dbaa5b Mon Sep 17 00:00:00 2001
From: Riley Gowan <t.rileygowan@gmail.com>
Date: Sun, 27 Jan 2019 10:21:58 -0500
Subject: [PATCH 04/34] Change variable name from seekCild -> seekChild

---
 lib/anime.es.js | 6 +++---
 lib/anime.js    | 6 +++---
 src/index.js    | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/lib/anime.es.js b/lib/anime.es.js
index e25346f3..035eed68 100644
--- a/lib/anime.es.js
+++ b/lib/anime.es.js
@@ -951,15 +951,15 @@ function anime(params) {
     lastTime = adjustTime(instance.currentTime) * (1 / anime.speed);
   }
 
-  function seekCild(time, child) {
+  function seekChild(time, child) {
     if (child) { child.seek(time - child.timelineOffset); }
   }
 
   function syncInstanceChildren(time) {
     if (!instance.reversePlayback) {
-      for (var i = 0; i < childrenLength; i++) { seekCild(time, children[i]); }
+      for (var i = 0; i < childrenLength; i++) { seekChild(time, children[i]); }
     } else {
-      for (var i$1 = childrenLength; i$1--;) { seekCild(time, children[i$1]); }
+      for (var i$1 = childrenLength; i$1--;) { seekChild(time, children[i$1]); }
     }
   }
 
diff --git a/lib/anime.js b/lib/anime.js
index 7d3d1c1c..b65bee3f 100644
--- a/lib/anime.js
+++ b/lib/anime.js
@@ -953,15 +953,15 @@ function anime(params) {
     lastTime = adjustTime(instance.currentTime) * (1 / anime.speed);
   }
 
-  function seekCild(time, child) {
+  function seekChild(time, child) {
     if (child) { child.seek(time - child.timelineOffset); }
   }
 
   function syncInstanceChildren(time) {
     if (!instance.reversePlayback) {
-      for (var i = 0; i < childrenLength; i++) { seekCild(time, children[i]); }
+      for (var i = 0; i < childrenLength; i++) { seekChild(time, children[i]); }
     } else {
-      for (var i$1 = childrenLength; i$1--;) { seekCild(time, children[i$1]); }
+      for (var i$1 = childrenLength; i$1--;) { seekChild(time, children[i$1]); }
     }
   }
 
diff --git a/src/index.js b/src/index.js
index f06be1ea..e053928e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -931,15 +931,15 @@ function anime(params = {}) {
     lastTime = adjustTime(instance.currentTime) * (1 / anime.speed);
   }
 
-  function seekCild(time, child) {
+  function seekChild(time, child) {
     if (child) child.seek(time - child.timelineOffset);
   }
 
   function syncInstanceChildren(time) {
     if (!instance.reversePlayback) {
-      for (let i = 0; i < childrenLength; i++) seekCild(time, children[i]);
+      for (let i = 0; i < childrenLength; i++) seekChild(time, children[i]);
     } else {
-      for (let i = childrenLength; i--;) seekCild(time, children[i]);
+      for (let i = childrenLength; i--;) seekChild(time, children[i]);
     }
   }
 

From ce0fcd404f3618218c994d0ce380478c1dc0ea7a Mon Sep 17 00:00:00 2001
From: whitelight <femikiki@gmail.com>
Date: Wed, 30 Jan 2019 17:34:51 -0500
Subject: [PATCH 05/34] Just fixing a little error I noticed ;)

---
 src/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index 7caf091c..df536205 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1024,7 +1024,7 @@ function anime(params = {}) {
     const insTime = adjustTime(engineTime);
     instance.progress = minMax((insTime / insDuration) * 100, 0, 100);
     instance.reversePlayback = insTime < instance.currentTime;
-    if (children) { syncInstanceChildren(insTime); };
+    if (children) { syncInstanceChildren(insTime); }
     if (!instance.began && instance.currentTime > 0) {
       instance.began = true;
       setCallback('begin');
@@ -1270,4 +1270,4 @@ anime.easing = parseEasings;
 anime.penner = penner;
 anime.random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 
-export default anime;
\ No newline at end of file
+export default anime;

From b3f851ac53487dd2f1d8ae746f05f5bd4dce804e Mon Sep 17 00:00:00 2001
From: Eric NICOLAS <ccjmne@gmail.com>
Date: Sat, 2 Feb 2019 22:20:05 +0100
Subject: [PATCH 06/34] Fix a couple of typos

Most importantly, `their is` became `there is`.
---
 documentation/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/documentation/index.html b/documentation/index.html
index a7824b73..251f11ed 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -1419,7 +1419,7 @@ <h3 class="demo-title">Animation keyframes</h3>
       Animation keyframes are defined using an Array, within the <code>keyframes</code> property.
     </p>
     <p class="bubble info">
-      If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation total duration divided by the number of keyframes.
+      If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.
     </p>
     <table>
       <thead>
@@ -1467,7 +1467,7 @@ <h3 class="demo-title">Property keyframes</h3>
       Similar to <a class="color-keyframes" href="#animationKeyframes">animation keyframes</a>, property keyframes are defined using an Array of property Object. Property keyframes allow overlapping animations since each property have its own keyframes array.
     </p>
     <p class="bubble info">
-      If their is no duration specified inside the keyframes, each keyframe duration will be equal to the animation total duration divided by the number of keyframes.
+      If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.
     </p>
     <table>
       <thead>

From ba35b74830354e3abd3c0fabe3f653586378b3b6 Mon Sep 17 00:00:00 2001
From: Lawrence Gosset <lawrencegosset@gmail.com>
Date: Sun, 17 Feb 2019 17:08:19 +0000
Subject: [PATCH 07/34] =?UTF-8?q?Fix=20documentation=20typo=20degres=20?=
 =?UTF-8?q?=E2=86=92=20degrees?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 documentation/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/index.html b/documentation/index.html
index a7824b73..fe3b3702 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -3215,7 +3215,7 @@ <h3 class="demo-title">Motion path</h3>
       <tr>
         <td><code>'angle'</code></td>
         <td><code>myPath('angle')</code></td>
-        <td>Return the current angle value in <code>'degres'</code> of the SVG path</td>
+        <td>Return the current angle value in <code>'degrees'</code> of the SVG path</td>
       </tr>
     </table>
   </div>

From 77f129bcd160b190e3250e74d406a9048e27cfef Mon Sep 17 00:00:00 2001
From: YuriFA <yurik45gb@gmail.com>
Date: Tue, 26 Feb 2019 17:33:58 +0300
Subject: [PATCH 08/34] Fix getParentSvgEl with return parent of svg element
 but not root svg element

---
 src/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/index.js b/src/index.js
index 7caf091c..d26403f4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -126,7 +126,7 @@ function elastic(amplitude = 1, period = .5) {
   const a = minMax(amplitude, 1, 10);
   const p = minMax(period, .1, 2);
   return t => {
-    return (t === 0 || t === 1) ? t : 
+    return (t === 0 || t === 1) ? t :
       -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
   }
 }
@@ -262,7 +262,7 @@ const penner = (() => {
     ]
   }
 
-  let eases = { 
+  let eases = {
     linear: [0.250, 0.250, 0.750, 0.750]
   }
 
@@ -523,7 +523,7 @@ function getRectLength(el) {
 
 function getLineLength(el) {
   return getDistance(
-    {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')}, 
+    {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')},
     {x: getAttribute(el, 'x2'), y: getAttribute(el, 'y2')}
   );
 }
@@ -569,8 +569,8 @@ function setDashoffset(el) {
 function getParentSvgEl(el) {
   let parentEl = el.parentNode;
   while (is.svg(parentEl)) {
-    parentEl = parentEl.parentNode;
     if (!is.svg(parentEl.parentNode)) break;
+    parentEl = parentEl.parentNode;
   }
   return parentEl;
 }
@@ -858,7 +858,7 @@ let pausedInstances = [];
 let raf;
 
 const engine = (() => {
-  function play() { 
+  function play() {
     raf = requestAnimationFrame(step);
   }
   function step(t) {

From 93cb4b638ba49818f7aec619e49cd217f77f37c0 Mon Sep 17 00:00:00 2001
From: Yuri FA <yurik45gb@gmail.com>
Date: Wed, 27 Feb 2019 10:07:58 +0300
Subject: [PATCH 09/34] Revert removed spaces

---
 src/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/index.js b/src/index.js
index d26403f4..946d2af6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -126,7 +126,7 @@ function elastic(amplitude = 1, period = .5) {
   const a = minMax(amplitude, 1, 10);
   const p = minMax(period, .1, 2);
   return t => {
-    return (t === 0 || t === 1) ? t :
+    return (t === 0 || t === 1) ? t : 
       -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
   }
 }
@@ -262,7 +262,7 @@ const penner = (() => {
     ]
   }
 
-  let eases = {
+  let eases = { 
     linear: [0.250, 0.250, 0.750, 0.750]
   }
 
@@ -523,7 +523,7 @@ function getRectLength(el) {
 
 function getLineLength(el) {
   return getDistance(
-    {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')},
+    {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')}, 
     {x: getAttribute(el, 'x2'), y: getAttribute(el, 'y2')}
   );
 }
@@ -858,7 +858,7 @@ let pausedInstances = [];
 let raf;
 
 const engine = (() => {
-  function play() {
+  function play() { 
     raf = requestAnimationFrame(step);
   }
   function step(t) {
@@ -1270,4 +1270,4 @@ anime.easing = parseEasings;
 anime.penner = penner;
 anime.random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 
-export default anime;
\ No newline at end of file
+export default anime;

From df81656741c26e00c2916156674f9714fa962d87 Mon Sep 17 00:00:00 2001
From: Johan Nordberg <its@johan-nordberg.com>
Date: Thu, 28 Feb 2019 15:20:31 +0100
Subject: [PATCH 10/34] Set progress to duration instead of 0 when reversed

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 7caf091c..43f42840 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1093,7 +1093,7 @@ function anime(params = {}) {
     childrenLength = children.length;
     for (let i = childrenLength; i--;) instance.children[i].reset();
     if (instance.reversed && instance.loop !== true || (direction === 'alternate' && instance.loop === 1)) instance.remaining++;
-    setAnimationsProgress(0);
+    setAnimationsProgress(instance.reversed ? instance.duration : 0);
   }
 
   // Set Value helper

From 091cb4249b59605c41b06b84678491085c1f26ff Mon Sep 17 00:00:00 2001
From: Ari Lotter <arilotter@gmail.com>
Date: Wed, 6 Mar 2019 13:54:46 -0500
Subject: [PATCH 11/34] Allow numeric values with leading '+' and/or with
 exponent parts. Fixes #551

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 7caf091c..a661b543 100644
--- a/src/index.js
+++ b/src/index.js
@@ -625,7 +625,7 @@ function getPathProgress(path, progress) {
 // Decompose value
 
 function decomposeValue(val, unit) {
-  const rgx = /-?\d*\.?\d+/g;
+  const rgx = /[-+]?\d*\.?\d+([eE][-+]?\d+)?/g;
   const value = validateValue((is.pth(val) ? val.totalLength : val), unit) + '';
   return {
     original: value,

From d6f3a3c82a5197095c1059f255eb03c1b5a69b3c Mon Sep 17 00:00:00 2001
From: Daniel Ruf <daniel.ruf@ueberbit.de>
Date: Fri, 8 Mar 2019 08:50:11 +0100
Subject: [PATCH 12/34] Remove duplicate CSS properties and rename flex-pack to
 justify-content

---
 documentation/assets/css/animejs.css       | 1 -
 documentation/assets/css/documentation.css | 1 -
 documentation/assets/css/website.css       | 1 -
 documentation/assets/js/website.js         | 2 +-
 4 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/documentation/assets/css/animejs.css b/documentation/assets/css/animejs.css
index 337af6d9..ef09535c 100644
--- a/documentation/assets/css/animejs.css
+++ b/documentation/assets/css/animejs.css
@@ -63,7 +63,6 @@
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
   font: inherit;
   vertical-align: baseline;
 }
diff --git a/documentation/assets/css/documentation.css b/documentation/assets/css/documentation.css
index e36df003..a0f9f4bb 100644
--- a/documentation/assets/css/documentation.css
+++ b/documentation/assets/css/documentation.css
@@ -367,7 +367,6 @@ article {
   z-index: 1;
   display: flex;
   align-items: center;
-  flex-pack: center;
   justify-content: center;
   width: 100%;
   min-height: 200px;
diff --git a/documentation/assets/css/website.css b/documentation/assets/css/website.css
index 856fb844..be7e3fac 100644
--- a/documentation/assets/css/website.css
+++ b/documentation/assets/css/website.css
@@ -114,7 +114,6 @@ a:hover .arrow:before,
 .nav-bar-content {
   display: flex;
   flex-shrink: 0;
-  flex-direction: row;
   grid-column: 1/13;
   justify-content: space-between;
   flex-direction: row;
diff --git a/documentation/assets/js/website.js b/documentation/assets/js/website.js
index bcd0ad8d..35c28f9c 100644
--- a/documentation/assets/js/website.js
+++ b/documentation/assets/js/website.js
@@ -235,7 +235,7 @@ var logoAnimation = (function() {
     targets: '.dot',
     scale: 1,
     rotate: '1turn',
-    scaleY: {value: .5, delay: 0, duration: 150, delay: 230},
+    scaleY: {value: .5, duration: 150, delay: 230},
     translateX: 430,
     translateY: [
       {value: 244, duration: 100},

From fce16371e3f84d40f40bae0911518af655731931 Mon Sep 17 00:00:00 2001
From: Chris Brown <chris@chrisbrown.io>
Date: Thu, 28 Mar 2019 16:37:09 +0000
Subject: [PATCH 13/34] Update anime.running reference when clearing array on
 visibilitychange event

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index 7caf091c..5bc3a484 100644
--- a/src/index.js
+++ b/src/index.js
@@ -890,7 +890,7 @@ function handleVisibilityChange() {
   if (document.hidden) {
     activeInstances.forEach(ins => ins.pause());
     pausedInstances = activeInstances.slice(0);
-    activeInstances = [];
+    anime.running = activeInstances = [];
   } else {
     pausedInstances.forEach(ins => ins.play());
   }

From 75320f30e1878f2a8cd6dae7b96dd0467fc9805f Mon Sep 17 00:00:00 2001
From: Dimitris Raptis <dimitrisraptis96@gmail.com>
Date: Tue, 16 Apr 2019 10:45:39 +0300
Subject: [PATCH 14/34] Fix small typo

Change the world "indivudaly" to "individually".
---
 documentation/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/index.html b/documentation/index.html
index a7824b73..cbbb309a 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -293,7 +293,7 @@ <h3 class="demo-title">CSS Properties</h3>
   <h3 class="demo-title">CSS Transforms</h3>
   <div class="demo-description">
     <p>
-      Animate CSS transforms properties indivudaly.
+      Animate CSS transforms properties individually.
     </p>
     <p class="bubble info">
       It's possible to specify different timing for each transforms properties, more details in the <a class="color-prop-params" href="#specificPropParameters">specific property parameters</a> section.

From 32b4f5acaab145da2e0c6a2884510919eb52beb9 Mon Sep 17 00:00:00 2001
From: Eugene Kopich <github@web2033.com>
Date: Thu, 6 Jun 2019 12:00:42 +0300
Subject: [PATCH 15/34] correct sign

---
 documentation/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/index.html b/documentation/index.html
index a7824b73..a7bc5114 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -1204,7 +1204,7 @@ <h3 class="demo-title">Relative</h3>
     easing: 'easeInOutSine'
   },
   rotate: {
-    value: '+=2turn', // 0 * 2 = '2turn'
+    value: '+=2turn', // 0 + 2 = '2turn'
     duration: 1800,
     easing: 'easeInOutSine'
   },

From 1556b756986ce4a4cc884032de06c9bb3a31e998 Mon Sep 17 00:00:00 2001
From: Eugene Kopich <github@web2033.com>
Date: Thu, 6 Jun 2019 12:13:17 +0300
Subject: [PATCH 16/34] Hexadecimal

---
 documentation/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/documentation/index.html b/documentation/index.html
index a7824b73..537dc39d 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -1220,7 +1220,7 @@ <h3 class="demo-title">Relative</h3>
   <h3 class="demo-title">Colors</h3>
   <div class="demo-description">
     <p>
-      <i>anime.js</i> accepts and converts Haxadecimal, RGB, RGBA, HSL, and HSLA color values.
+      <i>anime.js</i> accepts and converts Hexadecimal, RGB, RGBA, HSL, and HSLA color values.
     </p>
     <p class="bubble warning">
       CSS color codes ( e.g. : <code>'red', 'yellow', 'aqua'</code> ) are not supported.
@@ -1231,7 +1231,7 @@ <h3 class="demo-title">Colors</h3>
         <td>Example</td>
       </thead>
       <tr>
-        <td>Haxadecimal</td>
+        <td>Hexadecimal</td>
         <td><code>'#FFF'</code> or <code>'#FFFFFF'</code></td>
       </tr>
       <tr>

From 31fae15557e2c345420ce7d4ca0867ef1aa3fbac Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Tue, 23 Jul 2019 10:32:59 +0200
Subject: [PATCH 17/34] create v3.1.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 706559ce..a4cd3e40 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animejs",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "homepage": "http://animejs.com",
   "repository": "juliangarnier/anime",
   "description": "JavaScript animation engine",

From f814d5b5f3ca1f725062d517d7224b8ac4508252 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Tue, 23 Jul 2019 10:37:34 +0200
Subject: [PATCH 18/34] Easings refactoring + add Bounce easing

---
 documentation/index.html |  47 +++++++++++++++---
 lib/anime.es.js          | 100 +++++++++++++++------------------------
 lib/anime.js             | 100 +++++++++++++++------------------------
 lib/anime.min.js         |   4 +-
 src/index.js             |  92 +++++++++++++----------------------
 5 files changed, 150 insertions(+), 193 deletions(-)

diff --git a/documentation/index.html b/documentation/index.html
index a7824b73..bb9a74e8 100644
--- a/documentation/index.html
+++ b/documentation/index.html
@@ -3436,6 +3436,11 @@ <h3 class="demo-title">Penner's functions</h3>
         <td><code>'easeOutBack'</code></td>
         <td><code>'easeInOutBack'</code></td>
       <tr>
+      <tr>
+        <td><code>'easeInBounce'</code></td>
+        <td><code>'easeOutBounce'</code></td>
+        <td><code>'easeInOutBounce'</code></td>
+      <tr>
     </table>
   </div>
   <div class="demo-content penner-equations-demo">
@@ -3445,10 +3450,39 @@ <h3 class="demo-title">Penner's functions</h3>
 /*DEMO*/
 var demoContentEl = document.querySelector('.penner-equations-demo');
 var fragment = document.createDocumentFragment();
+var easingNames = [
+  'easeInQuad',
+  'easeInCubic',
+  'easeInQuart',
+  'easeInQuint',
+  'easeInSine',
+  'easeInExpo',
+  'easeInCirc',
+  'easeInBack',
+  'easeInBounce',
+  'easeInOutQuad',
+  'easeInOutCubic',
+  'easeInOutQuart',
+  'easeInOutQuint',
+  'easeInOutSine',
+  'easeInOutExpo',
+  'easeInOutCirc',
+  'easeInOutBack',
+  'easeInOutBounce',
+  'easeOutQuad',
+  'easeOutCubic',
+  'easeOutQuart',
+  'easeOutQuint',
+  'easeOutSine',
+  'easeOutExpo',
+  'easeOutCirc',
+  'easeOutBack',
+  'easeOutBounce'
+]
 
 function createEasingDemo(easing) {
   var demoEl = document.createElement('div');
-  demoEl.classList.add('stretched','square','el');
+  demoEl.classList.add('stretched','square','el', 'easing-'+easing);
   anime({
     targets: demoEl,
     translateX: 250,
@@ -3456,16 +3490,15 @@ <h3 class="demo-title">Penner's functions</h3>
     loop: true,
     delay: 200,
     endDelay: 200,
-    easing: easing,
+    duration: 2000,
+    easing: easing
   });
   fragment.appendChild(demoEl);
 }
 
-for (var easeName in anime.penner) {
-  if (Array.isArray(anime.penner[easeName])) {
-    createEasingDemo(easeName);
-  }
-}
+easingNames.forEach(function(easeName) {
+  createEasingDemo(easeName);
+});
 
 demoContentEl.innerHTML = '';
 demoContentEl.appendChild(fragment);
diff --git a/lib/anime.es.js b/lib/anime.es.js
index 2a26911b..9c52d3b1 100644
--- a/lib/anime.es.js
+++ b/lib/anime.es.js
@@ -1,5 +1,5 @@
 /*
- * anime.js v3.0.1
+ * anime.js v3.1.0
  * (c) 2019 Julian Garnier
  * Released under the MIT license
  * animejs.com
@@ -127,20 +127,6 @@ function spring(string, duration) {
 
 }
 
-// Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/
-
-function elastic(amplitude, period) {
-  if ( amplitude === void 0 ) amplitude = 1;
-  if ( period === void 0 ) period = .5;
-
-  var a = minMax(amplitude, 1, 10);
-  var p = minMax(period, .1, 2);
-  return function (t) {
-    return (t === 0 || t === 1) ? t : 
-      -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
-  }
-}
-
 // Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function
 
 function steps(steps) {
@@ -234,57 +220,45 @@ var bezier = (function () {
 
 var penner = (function () {
 
-  var names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic'];
-
-  // Approximated Penner equations http://matthewlein.com/ceaser/
-
-  var curves = {
-    In: [
-      [0.550, 0.085, 0.680, 0.530], /* inQuad */
-      [0.550, 0.055, 0.675, 0.190], /* inCubic */
-      [0.895, 0.030, 0.685, 0.220], /* inQuart */
-      [0.755, 0.050, 0.855, 0.060], /* inQuint */
-      [0.470, 0.000, 0.745, 0.715], /* inSine */
-      [0.950, 0.050, 0.795, 0.035], /* inExpo */
-      [0.600, 0.040, 0.980, 0.335], /* inCirc */
-      [0.600,-0.280, 0.735, 0.045], /* inBack */
-      elastic /* inElastic */
-    ],
-    Out: [
-      [0.250, 0.460, 0.450, 0.940], /* outQuad */
-      [0.215, 0.610, 0.355, 1.000], /* outCubic */
-      [0.165, 0.840, 0.440, 1.000], /* outQuart */
-      [0.230, 1.000, 0.320, 1.000], /* outQuint */
-      [0.390, 0.575, 0.565, 1.000], /* outSine */
-      [0.190, 1.000, 0.220, 1.000], /* outExpo */
-      [0.075, 0.820, 0.165, 1.000], /* outCirc */
-      [0.175, 0.885, 0.320, 1.275], /* outBack */
-      function (a, p) { return function (t) { return 1 - elastic(a, p)(1 - t); }; } /* outElastic */
-    ],
-    InOut: [
-      [0.455, 0.030, 0.515, 0.955], /* inOutQuad */
-      [0.645, 0.045, 0.355, 1.000], /* inOutCubic */
-      [0.770, 0.000, 0.175, 1.000], /* inOutQuart */
-      [0.860, 0.000, 0.070, 1.000], /* inOutQuint */
-      [0.445, 0.050, 0.550, 0.950], /* inOutSine */
-      [1.000, 0.000, 0.000, 1.000], /* inOutExpo */
-      [0.785, 0.135, 0.150, 0.860], /* inOutCirc */
-      [0.680,-0.550, 0.265, 1.550], /* inOutBack */
-      function (a, p) { return function (t) { return t < .5 ? elastic(a, p)(t * 2) / 2 : 1 - elastic(a, p)(t * -2 + 2) / 2; }; } /* inOutElastic */
-    ]
+  // Based on jQuery UI's implemenation of easing equations from Robert Penner (http://www.robertpenner.com/easing)
+
+  var eases = { linear: function () { return function (t) { return t; }; } };
+
+  var functionEasings = {
+    Sine: function () { return function (t) { return 1 - Math.cos(t * Math.PI / 2); }; },
+    Circ: function () { return function (t) { return 1 - Math.sqrt(1 - t * t); }; },
+    Back: function () { return function (t) { return t * t * (3 * t - 2); }; },
+    Bounce: function () { return function (t) {
+      var pow2, b = 4;
+      while (t < (( pow2 = Math.pow(2, --b)) - 1) / 11) {}
+      return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow(( pow2 * 3 - 2 ) / 22 - t, 2)
+    }; },
+    Elastic: function (amplitude, period) {
+      if ( amplitude === void 0 ) amplitude = 1;
+      if ( period === void 0 ) period = .5;
+
+      var a = minMax(amplitude, 1, 10);
+      var p = minMax(period, .1, 2);
+      return function (t) {
+        return (t === 0 || t === 1) ? t : 
+          -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
+      }
+    }
   };
 
-  var eases = { 
-    linear: [0.250, 0.250, 0.750, 0.750]
-  };
+  var baseEasings = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo'];
 
-  var loop = function ( coords ) {
-    curves[coords].forEach(function (ease, i) {
-      eases['ease'+coords+names[i]] = ease;
-    });
-  };
+  baseEasings.forEach(function (name, i) {
+    functionEasings[name] = function () { return function (t) { return Math.pow(t, i + 2); }; };
+  });
 
-  for (var coords in curves) loop( coords );
+  Object.keys(functionEasings).forEach(function (name) {
+    var easeIn = functionEasings[name];
+    eases['easeIn' + name] = easeIn;
+    eases['easeOut' + name] = function (a, b) { return function (t) { return 1 - easeIn(a, b)(1 - t); }; };
+    eases['easeInOut' + name] = function (a, b) { return function (t) { return t < 0.5 ? easeIn(a, b)(t * 2) / 2 : 
+      1 - easeIn(a, b)(t * -2 + 2) / 2; }; };
+  });
 
   return eases;
 
@@ -299,7 +273,7 @@ function parseEasings(easing, duration) {
     case 'spring' : return spring(easing, duration);
     case 'cubicBezier' : return applyArguments(bezier, args);
     case 'steps' : return applyArguments(steps, args);
-    default : return is.fnc(ease) ? applyArguments(ease, args) : applyArguments(bezier, ease);
+    default : return applyArguments(ease, args);
   }
 }
 
diff --git a/lib/anime.js b/lib/anime.js
index 7bde123d..f48317e5 100644
--- a/lib/anime.js
+++ b/lib/anime.js
@@ -1,5 +1,5 @@
 /*
- * anime.js v3.0.1
+ * anime.js v3.1.0
  * (c) 2019 Julian Garnier
  * Released under the MIT license
  * animejs.com
@@ -129,20 +129,6 @@ function spring(string, duration) {
 
 }
 
-// Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/
-
-function elastic(amplitude, period) {
-  if ( amplitude === void 0 ) amplitude = 1;
-  if ( period === void 0 ) period = .5;
-
-  var a = minMax(amplitude, 1, 10);
-  var p = minMax(period, .1, 2);
-  return function (t) {
-    return (t === 0 || t === 1) ? t : 
-      -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
-  }
-}
-
 // Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function
 
 function steps(steps) {
@@ -236,57 +222,45 @@ var bezier = (function () {
 
 var penner = (function () {
 
-  var names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic'];
-
-  // Approximated Penner equations http://matthewlein.com/ceaser/
-
-  var curves = {
-    In: [
-      [0.550, 0.085, 0.680, 0.530], /* inQuad */
-      [0.550, 0.055, 0.675, 0.190], /* inCubic */
-      [0.895, 0.030, 0.685, 0.220], /* inQuart */
-      [0.755, 0.050, 0.855, 0.060], /* inQuint */
-      [0.470, 0.000, 0.745, 0.715], /* inSine */
-      [0.950, 0.050, 0.795, 0.035], /* inExpo */
-      [0.600, 0.040, 0.980, 0.335], /* inCirc */
-      [0.600,-0.280, 0.735, 0.045], /* inBack */
-      elastic /* inElastic */
-    ],
-    Out: [
-      [0.250, 0.460, 0.450, 0.940], /* outQuad */
-      [0.215, 0.610, 0.355, 1.000], /* outCubic */
-      [0.165, 0.840, 0.440, 1.000], /* outQuart */
-      [0.230, 1.000, 0.320, 1.000], /* outQuint */
-      [0.390, 0.575, 0.565, 1.000], /* outSine */
-      [0.190, 1.000, 0.220, 1.000], /* outExpo */
-      [0.075, 0.820, 0.165, 1.000], /* outCirc */
-      [0.175, 0.885, 0.320, 1.275], /* outBack */
-      function (a, p) { return function (t) { return 1 - elastic(a, p)(1 - t); }; } /* outElastic */
-    ],
-    InOut: [
-      [0.455, 0.030, 0.515, 0.955], /* inOutQuad */
-      [0.645, 0.045, 0.355, 1.000], /* inOutCubic */
-      [0.770, 0.000, 0.175, 1.000], /* inOutQuart */
-      [0.860, 0.000, 0.070, 1.000], /* inOutQuint */
-      [0.445, 0.050, 0.550, 0.950], /* inOutSine */
-      [1.000, 0.000, 0.000, 1.000], /* inOutExpo */
-      [0.785, 0.135, 0.150, 0.860], /* inOutCirc */
-      [0.680,-0.550, 0.265, 1.550], /* inOutBack */
-      function (a, p) { return function (t) { return t < .5 ? elastic(a, p)(t * 2) / 2 : 1 - elastic(a, p)(t * -2 + 2) / 2; }; } /* inOutElastic */
-    ]
+  // Based on jQuery UI's implemenation of easing equations from Robert Penner (http://www.robertpenner.com/easing)
+
+  var eases = { linear: function () { return function (t) { return t; }; } };
+
+  var functionEasings = {
+    Sine: function () { return function (t) { return 1 - Math.cos(t * Math.PI / 2); }; },
+    Circ: function () { return function (t) { return 1 - Math.sqrt(1 - t * t); }; },
+    Back: function () { return function (t) { return t * t * (3 * t - 2); }; },
+    Bounce: function () { return function (t) {
+      var pow2, b = 4;
+      while (t < (( pow2 = Math.pow(2, --b)) - 1) / 11) {}
+      return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow(( pow2 * 3 - 2 ) / 22 - t, 2)
+    }; },
+    Elastic: function (amplitude, period) {
+      if ( amplitude === void 0 ) amplitude = 1;
+      if ( period === void 0 ) period = .5;
+
+      var a = minMax(amplitude, 1, 10);
+      var p = minMax(period, .1, 2);
+      return function (t) {
+        return (t === 0 || t === 1) ? t : 
+          -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
+      }
+    }
   };
 
-  var eases = { 
-    linear: [0.250, 0.250, 0.750, 0.750]
-  };
+  var baseEasings = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo'];
 
-  var loop = function ( coords ) {
-    curves[coords].forEach(function (ease, i) {
-      eases['ease'+coords+names[i]] = ease;
-    });
-  };
+  baseEasings.forEach(function (name, i) {
+    functionEasings[name] = function () { return function (t) { return Math.pow(t, i + 2); }; };
+  });
 
-  for (var coords in curves) loop( coords );
+  Object.keys(functionEasings).forEach(function (name) {
+    var easeIn = functionEasings[name];
+    eases['easeIn' + name] = easeIn;
+    eases['easeOut' + name] = function (a, b) { return function (t) { return 1 - easeIn(a, b)(1 - t); }; };
+    eases['easeInOut' + name] = function (a, b) { return function (t) { return t < 0.5 ? easeIn(a, b)(t * 2) / 2 : 
+      1 - easeIn(a, b)(t * -2 + 2) / 2; }; };
+  });
 
   return eases;
 
@@ -301,7 +275,7 @@ function parseEasings(easing, duration) {
     case 'spring' : return spring(easing, duration);
     case 'cubicBezier' : return applyArguments(bezier, args);
     case 'steps' : return applyArguments(steps, args);
-    default : return is.fnc(ease) ? applyArguments(ease, args) : applyArguments(bezier, ease);
+    default : return applyArguments(ease, args);
   }
 }
 
diff --git a/lib/anime.min.js b/lib/anime.min.js
index 3f0baf1c..0f84643a 100644
--- a/lib/anime.min.js
+++ b/lib/anime.min.js
@@ -1,8 +1,8 @@
 /*
- * anime.js v3.0.1
+ * anime.js v3.1.0
  * (c) 2019 Julian Garnier
  * Released under the MIT license
  * animejs.com
  */
 
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},r=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],t={CSS:{},springs:{}};function a(n,e,r){return Math.min(Math.max(n,e),r)}function o(n,e){return n.indexOf(e)>-1}function i(n,e){return n.apply(null,e)}var u={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return u.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||u.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return u.hex(n)||u.rgb(n)||u.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function s(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function c(n,e){var r=s(n),o=a(u.und(r[0])?1:r[0],.1,100),i=a(u.und(r[1])?100:r[1],.1,100),c=a(u.und(r[2])?10:r[2],.1,100),f=a(u.und(r[3])?0:r[3],.1,100),l=Math.sqrt(i/o),d=c/(2*Math.sqrt(i*o)),p=d<1?l*Math.sqrt(1-d*d):0,v=1,h=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(v*Math.cos(p*r)+h*Math.sin(p*r)):(v+h*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}function l(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var d=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function i(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,u){if(0<=r&&r<=1&&0<=a&&a<=1){var s=new Float32Array(n);if(r!==t||a!==u)for(var c=0;c<n;++c)s[c]=o(c*e,r,a);return function(n){return r===t&&a===u?n:0===n||1===n?n:o(f(n),t,u)}}function f(t){for(var u=0,c=1,f=n-1;c!==f&&s[c]<=t;++c)u+=e;var l=u+(t-s[--c])/(s[c+1]-s[c])*e,d=i(l,r,a);return d>=.001?function(n,e,r,t){for(var a=0;a<4;++a){var u=i(e,r,t);if(0===u)return e;e-=(o(e,r,t)-n)/u}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var i,u,s=0;(i=o(u=e+(r-e)/2,t,a)-n)>0?r=u:e=u,Math.abs(i)>1e-7&&++s<10;);return u}(t,u,u+e,r,a)}}}(),p=function(){var n=["Quad","Cubic","Quart","Quint","Sine","Expo","Circ","Back","Elastic"],e={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],f],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(n,e){return function(r){return 1-f(n,e)(1-r)}}],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(n,e){return function(r){return r<.5?f(n,e)(2*r)/2:1-f(n,e)(-2*r+2)/2}}]},r={linear:[.25,.25,.75,.75]},t=function(t){e[t].forEach(function(e,a){r["ease"+t+n[a]]=e})};for(var a in e)t(a);return r}();function v(n,e){if(u.fnc(n))return n;var r=n.split("(")[0],t=p[r],a=s(n);switch(r){case"spring":return c(n,e);case"cubicBezier":return i(d,a);case"steps":return i(l,a);default:return u.fnc(t)?i(t,a):i(d,t)}}function h(n){try{return document.querySelectorAll(n)}catch(n){return}}function g(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<r;o++)if(o in n){var i=n[o];e.call(t,i,o,n)&&a.push(i)}return a}function m(n){return n.reduce(function(n,e){return n.concat(u.arr(e)?m(e):e)},[])}function y(n){return u.arr(n)?n:(u.str(n)&&(n=h(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function b(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var r in n)e[r]=n[r];return e}function M(n,e){var r=x(n);for(var t in n)r[t]=e.hasOwnProperty(t)?e[t]:n[t];return r}function w(n,e){var r=x(n);for(var t in e)r[t]=u.und(n[t])?e[t]:n[t];return r}function k(n){return u.rgb(n)?(r=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+r[1]+",1)":e:u.hex(n)?(t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,r,t){return e+e+r+r+t+t}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):u.hsl(n)?function(n){var e,r,t,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,i=parseInt(a[2],10)/100,u=parseInt(a[3],10)/100,s=a[4]||1;function c(n,e,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==i)e=r=t=u;else{var f=u<.5?u*(1+i):u+i-u*i,l=2*u-f;e=c(l,f,o+1/3),r=c(l,f,o),t=c(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+s+")"}(n):void 0;var e,r,t,a}function C(n){var e=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[2]}function O(n,e){return u.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(b([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!u.und(a))return a;var o=document.createElement(n.tagName),i=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;i.appendChild(o),o.style.position="absolute",o.style.width=100+r;var s=100/o.offsetWidth;i.removeChild(o);var c=s*parseFloat(e);return t.CSS[e+r]=c,c}function B(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return u.dom(n)&&!u.inp(n)&&(P(n,e)||u.svg(n)&&n[e])?"attribute":u.dom(n)&&b(r,e)?"transform":u.dom(n)&&"transform"!==e&&B(n,e)?"css":null!=n[e]?"object":void 0}function T(n){if(u.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,i=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),u=T(n).get(e)||i;return r&&(r.transforms.list.set(e,u),r.transforms.last=e),t?I(n,u,t):u}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return B(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function E(n,e){if(u.col(n))return k(n);var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e&&!/\s/g.test(n)?t+e:t}function L(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a<r.numberOfItems;a++){var o=r.getItem(a);a>0&&(t+=L(e,o)),e=o}return t}function j(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return L({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+L(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function q(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;u.svg(e)&&(e=e.parentNode,u.svg(e.parentNode)););return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),i=a.width,s=a.height,c=r.viewBox||(o?o.split(" "):[0,0,i,s]);return{el:t,viewBox:c,x:c[0]/1,y:c[1]/1,w:i/c[2],h:s/c[3]}}function $(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=q(n.el,n.svg),a=r(),o=r(-1),i=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(i.y-o.y,i.x-o.x)/Math.PI}}function X(n,e){var r=/-?\d*\.?\d+/g,t=E(u.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:u.str(n)||e?t.split(r):[]}}function Y(n){return g(n?m(u.arr(n)?n.map(y):y(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Z(n){var e=Y(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:T(n)}}})}function Q(n,e){var r=x(e);if(/^spring/.test(r.easing)&&(r.duration=c(r.easing)),u.arr(n)){var t=n.length;2===t&&!u.obj(n[0])?n={value:n}:u.fnc(e.duration)||(r.duration=e.duration/t)}var a=u.arr(n)?n:[n];return a.map(function(n,r){var t=u.obj(n)&&!u.pth(n)?n:{value:n};return u.und(t.delay)&&(t.delay=r?0:e.delay),u.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return w(n,r)})}function V(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=w(function(n){for(var e=g(m(n.map(function(n){return Object.keys(n)})),function(n){return u.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)u.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a<e.length;a++)t(a);return r}(t),e)),e)u.key(a)&&r.push({name:a,tweens:Q(e[a],n)});return r}function z(n,e){var r;return n.tweens.map(function(t){var a=function(n,e){var r={};for(var t in n){var a=O(n[t],e);u.arr(a)&&1===(a=a.map(function(n){return O(n,e)})).length&&(a=a[0]),r[t]=a}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(t,e),o=a.value,i=u.arr(o)?o[1]:o,s=C(i),c=N(e.target,n.name,s,e),f=r?r.to.original:c,l=u.arr(o)?o[0]:f,d=C(l)||C(c),p=s||d;return u.und(i)&&(i=f),a.from=X(l,p),a.to=X(A(i,l),p),a.start=r?r.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=u.pth(o),a.isColor=u.col(a.from.original),a.isColor&&(a.round=1),r=a,a})}var H={css:function(n,e,r){return n.style[e]=r},attribute:function(n,e,r){return n.setAttribute(e,r)},object:function(n,e,r){return n[e]=r},transform:function(n,e,r,t,a){if(t.list.set(e,r),e===t.last||a){var o="";t.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function G(n,e){Z(n).forEach(function(n){for(var r in e){var t=O(e[r],n),a=n.target,o=C(t),i=N(a,r,o,n),u=A(E(t,o||C(i)),i),s=D(a,r);H[s](a,r,u,n.transforms,!0)}})}function R(n,e){return g(m(n.map(function(n){return e.map(function(e){return function(n,e){var r=D(n.target,e.name);if(r){var t=z(e,n),a=t[t.length-1];return{type:r,property:e.name,animatable:n,tweens:t,duration:a.end,delay:t[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!u.und(n)})}function W(n,e){var r=n.length,t=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=r?Math.max.apply(Math,n.map(function(n){return t(n)+n.duration})):e.duration,a.delay=r?Math.min.apply(Math,n.map(function(n){return t(n)+n.delay})):e.delay,a.endDelay=r?a.duration-Math.max.apply(Math,n.map(function(n){return t(n)+n.duration-n.endDelay})):e.endDelay,a}var J=0;var K,U=[],_=[],nn=function(){function n(){K=requestAnimationFrame(e)}function e(e){var r=U.length;if(r){for(var t=0;t<r;){var a=U[t];if(a.paused){var o=U.indexOf(a);o>-1&&(U.splice(o,1),r=U.length)}else a.tick(e);t++}n()}else K=cancelAnimationFrame(K)}return n}();function en(r){void 0===r&&(r={});var t,o=0,i=0,u=0,s=0,c=null;function f(n){var e=window.Promise&&new Promise(function(n){return c=n});return n.finished=e,e}var l,d,p,v,h,m,y,b,x=(d=M(n,l=r),p=M(e,l),v=V(p,l),h=Z(l.targets),m=R(h,v),y=W(m,p),b=J,J++,w(d,{id:b,children:[],animatables:h,animations:m,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(x);function k(){var n=x.direction;"alternate"!==n&&(x.direction="normal"!==n?"normal":"reverse"),x.reversed=!x.reversed,t.forEach(function(n){return n.reversed=x.reversed})}function C(n){return x.reversed?x.duration-n:n}function O(){o=0,i=C(x.currentTime)*(1/en.speed)}function P(n,e){e&&e.seek(n-e.timelineOffset)}function I(n){for(var e=0,r=x.animations,t=r.length;e<t;){var o=r[e],i=o.animatable,u=o.tweens,s=u.length-1,c=u[s];s&&(c=g(u,function(e){return n<e.end})[0]||c);for(var f=a(n-c.start-c.delay,0,c.duration)/c.duration,l=isNaN(f)?1:c.easing(f),d=c.to.strings,p=c.round,v=[],h=c.to.numbers.length,m=void 0,y=0;y<h;y++){var b=void 0,M=c.to.numbers[y],w=c.from.numbers[y]||0;b=c.isPath?$(c.value,l*M):w+l*(M-w),p&&(c.isColor&&y>2||(b=Math.round(b*p)/p)),v.push(b)}var k=d.length;if(k){m=d[0];for(var C=0;C<k;C++){d[C];var O=d[C+1],P=v[C];isNaN(P)||(m+=O?P+O:P+" ")}}else m=v[0];H[o.type](i.target,o.property,m,i.transforms),o.currentValue=m,e++}}function B(n){x[n]&&!x.passThrough&&x[n](x)}function D(n){var e=x.duration,r=x.delay,l=e-x.endDelay,d=C(n);x.progress=a(d/e*100,0,100),x.reversePlayback=d<x.currentTime,t&&function(n){if(x.reversePlayback)for(var e=s;e--;)P(n,t[e]);else for(var r=0;r<s;r++)P(n,t[r])}(d),!x.began&&x.currentTime>0&&(x.began=!0,B("begin"),B("loopBegin")),d<=r&&0!==x.currentTime&&I(0),(d>=l&&x.currentTime!==e||!e)&&I(e),d>r&&d<l?(x.changeBegan||(x.changeBegan=!0,x.changeCompleted=!1,B("changeBegin")),B("change"),I(d)):x.changeBegan&&(x.changeCompleted=!0,x.changeBegan=!1,B("changeComplete")),x.currentTime=a(d,0,e),x.began&&B("update"),n>=e&&(i=0,x.remaining&&!0!==x.remaining&&x.remaining--,x.remaining?(o=u,B("loopComplete"),B("loopBegin"),"alternate"===x.direction&&k()):(x.paused=!0,x.completed||(x.completed=!0,B("loopComplete"),B("complete"),!x.passThrough&&"Promise"in window&&(c(),f(x)))))}return x.reset=function(){var n=x.direction;x.passThrough=!1,x.currentTime=0,x.progress=0,x.paused=!0,x.began=!1,x.changeBegan=!1,x.completed=!1,x.changeCompleted=!1,x.reversePlayback=!1,x.reversed="reverse"===n,x.remaining=x.loop,t=x.children;for(var e=s=t.length;e--;)x.children[e].reset();(x.reversed&&!0!==x.loop||"alternate"===n&&1===x.loop)&&x.remaining++,I(0)},x.set=function(n,e){return G(n,e),x},x.tick=function(n){u=n,o||(o=u),D((u+(i-o))*en.speed)},x.seek=function(n){D(C(n))},x.pause=function(){x.paused=!0,O()},x.play=function(){x.paused&&(x.completed&&x.reset(),x.paused=!1,U.push(x),O(),K||nn())},x.reverse=function(){k(),O()},x.restart=function(){x.reset(),x.play()},x.reset(),x.autoplay&&x.play(),x}function rn(n,e){for(var r=e.length;r--;)b(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(U.forEach(function(n){return n.pause()}),_=U.slice(0),U=[]):_.forEach(function(n){return n.play()})}),en.version="3.0.1",en.speed=1,en.running=U,en.remove=function(n){for(var e=Y(n),r=U.length;r--;){var t=U[r],a=t.animations,o=t.children;rn(e,a);for(var i=o.length;i--;){var u=o[i],s=u.animations;rn(e,s),s.length||u.children.length||o.splice(i,1)}a.length||o.length||t.pause()}},en.get=N,en.set=G,en.convertPx=I,en.path=function(n,e){var r=u.str(n)?h(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:q(r),totalLength:j(r)*(t/100)}}},en.setDashoffset=function(n){var e=j(n);return n.setAttribute("stroke-dasharray",e),e},en.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,i=e.from||0,s="first"===i,c="center"===i,f="last"===i,l=u.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,u){if(s&&(i=0),c&&(i=(u-1)/2),f&&(i=u-1),!m.length){for(var v=0;v<u;v++){if(a){var b=c?(a[0]-1)/2:i%a[0],x=c?(a[1]-1)/2:Math.floor(i/a[0]),M=b-v%a[0],w=x-Math.floor(v/a[0]),k=Math.sqrt(M*M+w*w);"x"===o&&(k=-M),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(i-v));y=Math.max.apply(Math,m)}t&&(m=m.map(function(n){return t(n/y)*y})),"reverse"===r&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},en.timeline=function(n){void 0===n&&(n={});var r=en(n);return r.duration=0,r.add=function(t,a){var o=U.indexOf(r),i=r.children;function s(n){n.passThrough=!0}o>-1&&U.splice(o,1);for(var c=0;c<i.length;c++)s(i[c]);var f=w(t,M(e,n));f.targets=f.targets||n.targets;var l=r.duration;f.autoplay=!1,f.direction=r.direction,f.timelineOffset=u.und(a)?l:A(a,l),s(r),r.seek(f.timelineOffset);var d=en(f);s(d),i.push(d);var p=W(i,n);return r.delay=p.delay,r.endDelay=p.endDelay,r.duration=p.duration,r.seek(0),r.reset(),r.autoplay&&r.play(),r},r},en.easing=v,en.penner=p,en.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},en});
\ No newline at end of file
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},t=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],r={CSS:{},springs:{}};function a(n,e,t){return Math.min(Math.max(n,e),t)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(t){return!n.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var t=c(n),o=a(i.und(t[0])?1:t[0],.1,100),u=a(i.und(t[1])?100:t[1],.1,100),s=a(i.und(t[2])?10:t[2],.1,100),f=a(i.und(t[3])?0:t[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var t=e?e*n/1e3:n;return t=d<1?Math.exp(-t*d*l)*(h*Math.cos(p*t)+v*Math.sin(p*t)):(h+v*t)*Math.exp(-t*l),0===n||1===n?n:1-t}return e?g:function(){var e=r.springs[n];if(e)return e;for(var t=0,a=0;;)if(1===g(t+=1/6)){if(++a>=16)break}else a=0;var o=t*(1/6)*1e3;return r.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function t(n,e){return 1-3*e+3*n}function r(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((t(e,o)*n+r(e,o))*n+a(e))*n}function u(n,e,o){return 3*t(e,o)*n*n+2*r(e,o)*n+a(e)}return function(t,r,a,i){if(0<=t&&t<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(t!==r||a!==i)for(var s=0;s<n;++s)c[s]=o(s*e,t,a);return function(n){return t===r&&a===i?n:0===n||1===n?n:o(f(n),r,i)}}function f(r){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=r;++s)i+=e;var l=i+(r-c[--s])/(c[s+1]-c[s])*e,d=u(l,t,a);return d>=.001?function(n,e,t,r){for(var a=0;a<4;++a){var i=u(e,t,r);if(0===i)return e;e-=(o(e,t,r)-n)/i}return e}(r,l,t,a):0===d?l:function(n,e,t,r,a){for(var u,i,c=0;(u=o(i=e+(t-e)/2,r,a)-n)>0?t=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(r,i,i+e,t,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var t=a(n,1,10),r=a(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,t){return function(r){return 1-e(n,t)(1-r)}},l["easeInOut"+n]=function(n,t){return function(r){return r<.5?e(n,t)(2*r)/2:1-e(n,t)(-2*r+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var t=n.split("(")[0],r=h[t],a=c(n);switch(t){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(r,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var t=n.length,r=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<t;o++)if(o in n){var u=n[o];e.call(r,u,o,n)&&a.push(u)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var t in n)e[t]=n[t];return e}function w(n,e){var t=x(n);for(var r in n)t[r]=e.hasOwnProperty(r)?e[r]:n[r];return t}function k(n,e){var t=x(n);for(var r in e)t[r]=i.und(n[r])?e[r]:n[r];return t}function O(n){return i.rgb(n)?(t=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+t[1]+",1)":e:i.hex(n)?(r=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,t,r){return e+e+t+t+r+r}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,t,r,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,u=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}if(0==u)e=t=r=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),t=s(l,f,o),r=s(l,f,o-1/3)}return"rgba("+255*e+","+255*t+","+255*r+","+c+")"}(n):void 0;var e,t,r,a}function C(n){var e=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[2]}function P(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function I(n,e){return n.getAttribute(e)}function B(n,e,t){if(M([t,"deg","rad","turn"],C(e)))return e;var a=r.CSS[e+t];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+t;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return r.CSS[e+t]=s,s}function D(n,e,t){if(e in n.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0";return t?B(n,a,t):a}}function T(n,e){return i.dom(n)&&!i.inp(n)&&(I(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(t,e)?"transform":i.dom(n)&&"transform"!==e&&D(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function F(n,e,t,r){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return t&&(t.transforms.list.set(e,i),t.transforms.last=e),r?B(n,i,r):i}function N(n,e,t,r){switch(T(n,e)){case"transform":return F(n,e,r,t);case"css":return D(n,e,t);case"attribute":return I(n,e);default:return n[e]||0}}function A(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+o+r;case"-":return a-o+r;case"*":return a*o+r}}function L(n,e){if(i.col(n))return O(n);var t=C(n),r=t?n.substr(0,n.length-t.length):n;return e&&!/\s/g.test(n)?r+e:r}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,t=n.points,r=0,a=0;a<t.numberOfItems;a++){var o=t.getItem(a);a>0&&(r+=j(e,o)),e=o}return r}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*I(o,"r");case"rect":return 2*I(a=n,"width")+2*I(a,"height");case"line":return j({x:I(r=n,"x1"),y:I(r,"y1")},{x:I(r,"x2"),y:I(r,"y2")});case"polyline":return S(n);case"polygon":return t=(e=n).points,S(e)+j(t.getItem(t.numberOfItems-1),t.getItem(0))}var e,t,r,a,o}function $(n,e){var t=e||{},r=t.el||function(n){for(var e=n.parentNode;i.svg(e)&&(e=e.parentNode,i.svg(e.parentNode)););return e}(n),a=r.getBoundingClientRect(),o=I(r,"viewBox"),u=a.width,c=a.height,s=t.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:r,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function t(t){void 0===t&&(t=0);var r=e+t>=1?e+t:0;return n.el.getPointAtLength(r)}var r=$(n.el,n.svg),a=t(),o=t(-1),u=t(1);switch(n.property){case"x":return(a.x-r.x)*r.w;case"y":return(a.y-r.y)*r.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var t=/-?\d*\.?\d+/g,r=L(i.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:i.str(n)||e?r.split(t):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,t){return t.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,t){return{target:n,id:t,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var t=x(e);if(/^spring/.test(t.easing)&&(t.duration=s(t.easing)),i.arr(n)){var r=n.length;2===r&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(t.duration=e.duration/r)}var a=i.arr(n)?n:[n];return a.map(function(n,t){var r=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(r.delay)&&(r.delay=t?0:e.delay),i.und(r.endDelay)&&(r.endDelay=t===a.length-1?e.endDelay:0),r}).map(function(n){return k(n,t)})}function z(n,e){var t=[],r=e.keyframes;for(var a in r&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),t={},r=function(r){var a=e[r];t[a]=n.map(function(n){var e={};for(var t in n)i.key(t)?t==a&&(e.value=n[t]):e[t]=n[t];return e})},a=0;a<e.length;a++)r(a);return t}(r),e)),e)i.key(a)&&t.push({name:a,tweens:V(e[a],n)});return t}function H(n,e){var t;return n.tweens.map(function(r){var a=function(n,e){var t={};for(var r in n){var a=P(n[r],e);i.arr(a)&&1===(a=a.map(function(n){return P(n,e)})).length&&(a=a[0]),t[r]=a}return t.duration=parseFloat(t.duration),t.delay=parseFloat(t.delay),t}(r,e),o=a.value,u=i.arr(o)?o[1]:o,c=C(u),s=N(e.target,n.name,c,e),f=t?t.to.original:s,l=i.arr(o)?o[0]:f,d=C(l)||C(s),p=c||d;return i.und(u)&&(u=f),a.from=Y(l,p),a.to=Y(A(u,l),p),a.start=t?t.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(o),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),t=a,a})}var G={css:function(n,e,t){return n.style[e]=t},attribute:function(n,e,t){return n.setAttribute(e,t)},object:function(n,e,t){return n[e]=t},transform:function(n,e,t,r,a){if(r.list.set(e,t),e===r.last||a){var o="";r.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function R(n,e){Q(n).forEach(function(n){for(var t in e){var r=P(e[t],n),a=n.target,o=C(r),u=N(a,t,o,n),i=A(L(r,o||C(u)),u),c=T(a,t);G[c](a,t,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var t=T(n.target,e.name);if(t){var r=H(e,n),a=r[r.length-1];return{type:t,property:e.name,animatable:n,tweens:r,duration:a.end,delay:r[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var t=n.length,r=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=t?Math.max.apply(Math,n.map(function(n){return r(n)+n.duration})):e.duration,a.delay=t?Math.min.apply(Math,n.map(function(n){return r(n)+n.delay})):e.delay,a.endDelay=t?a.duration-Math.max.apply(Math,n.map(function(n){return r(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var t=_.length;if(t){for(var r=0;r<t;){var a=_[r];if(a.paused){var o=_.indexOf(a);o>-1&&(_.splice(o,1),t=_.length)}else a.tick(e);r++}n()}else U=cancelAnimationFrame(U)}return n}();function tn(t){void 0===t&&(t={});var r,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=t),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,r.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/tn.speed)}function P(n,e){e&&e.seek(n-e.timelineOffset)}function I(n){for(var e=0,t=M.animations,r=t.length;e<r;){var o=t[e],u=o.animatable,i=o.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],P=h[O];isNaN(P)||(g+=C?P+C:P+" ")}}else g=h[0];G[o.type](u.target,o.property,g,u.transforms),o.currentValue=g,e++}}function B(n){M[n]&&!M.passThrough&&M[n](M)}function D(n){var e=M.duration,t=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,r&&function(n){if(M.reversePlayback)for(var e=c;e--;)P(n,r[e]);else for(var t=0;t<c;t++)P(n,r[t])}(d),!M.began&&M.currentTime>0&&(M.began=!0,B("begin"),B("loopBegin")),d<=t&&0!==M.currentTime&&I(0),(d>=l&&M.currentTime!==e||!e)&&I(e),d>t&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,B("changeBegin")),B("change"),I(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,B("changeComplete")),M.currentTime=a(d,0,e),M.began&&B("update"),n>=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,B("loopComplete"),B("loopBegin"),"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,B("loopComplete"),B("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,r=M.children;for(var e=c=r.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,I(0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),D((i+(u-o))*tn.speed)},M.seek=function(n){D(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function rn(n,e){for(var t=e.length;t--;)M(n,e[t].animatable.target)&&e.splice(t,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),_=[]):nn.forEach(function(n){return n.play()})}),tn.version="3.0.1",tn.speed=1,tn.running=_,tn.remove=function(n){for(var e=Z(n),t=_.length;t--;){var r=_[t],a=r.animations,o=r.children;rn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;rn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||r.pause()}},tn.get=N,tn.set=R,tn.convertPx=B,tn.path=function(n,e){var t=i.str(n)?g(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:$(t),totalLength:q(t)*(r/100)}}},tn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},tn.stagger=function(n,e){void 0===e&&(e={});var t=e.direction||"normal",r=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:u%a[0],M=s?(a[1]-1)/2:Math.floor(u/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===o&&(k=-x),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(u-v));y=Math.max.apply(Math,m)}r&&(m=m.map(function(n){return r(n/y)*y})),"reverse"===t&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},tn.timeline=function(n){void 0===n&&(n={});var t=tn(n);return t.duration=0,t.add=function(r,a){var o=_.indexOf(t),u=t.children;function c(n){n.passThrough=!0}o>-1&&_.splice(o,1);for(var s=0;s<u.length;s++)c(u[s]);var f=k(r,w(e,n));f.targets=f.targets||n.targets;var l=t.duration;f.autoplay=!1,f.direction=t.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(t),t.seek(f.timelineOffset);var d=tn(f);c(d),u.push(d);var p=J(u,n);return t.delay=p.delay,t.endDelay=p.endDelay,t.duration=p.duration,t.seek(0),t.reset(),t.autoplay&&t.play(),t},t},tn.easing=v,tn.penner=h,tn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},tn});
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 7caf091c..8248aff7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -120,17 +120,6 @@ function spring(string, duration) {
 
 }
 
-// Elastic easing adapted from jQueryUI http://api.jqueryui.com/easings/
-
-function elastic(amplitude = 1, period = .5) {
-  const a = minMax(amplitude, 1, 10);
-  const p = minMax(period, .1, 2);
-  return t => {
-    return (t === 0 || t === 1) ? t : 
-      -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
-  }
-}
-
 // Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function
 
 function steps(steps = 10) {
@@ -222,55 +211,42 @@ const bezier = (() => {
 
 const penner = (() => {
 
-  const names = ['Quad', 'Cubic', 'Quart', 'Quint', 'Sine', 'Expo', 'Circ', 'Back', 'Elastic'];
-
-  // Approximated Penner equations http://matthewlein.com/ceaser/
-
-  const curves = {
-    In: [
-      [0.550, 0.085, 0.680, 0.530], /* inQuad */
-      [0.550, 0.055, 0.675, 0.190], /* inCubic */
-      [0.895, 0.030, 0.685, 0.220], /* inQuart */
-      [0.755, 0.050, 0.855, 0.060], /* inQuint */
-      [0.470, 0.000, 0.745, 0.715], /* inSine */
-      [0.950, 0.050, 0.795, 0.035], /* inExpo */
-      [0.600, 0.040, 0.980, 0.335], /* inCirc */
-      [0.600,-0.280, 0.735, 0.045], /* inBack */
-      elastic /* inElastic */
-    ],
-    Out: [
-      [0.250, 0.460, 0.450, 0.940], /* outQuad */
-      [0.215, 0.610, 0.355, 1.000], /* outCubic */
-      [0.165, 0.840, 0.440, 1.000], /* outQuart */
-      [0.230, 1.000, 0.320, 1.000], /* outQuint */
-      [0.390, 0.575, 0.565, 1.000], /* outSine */
-      [0.190, 1.000, 0.220, 1.000], /* outExpo */
-      [0.075, 0.820, 0.165, 1.000], /* outCirc */
-      [0.175, 0.885, 0.320, 1.275], /* outBack */
-      (a, p) => t => 1 - elastic(a, p)(1 - t) /* outElastic */
-    ],
-    InOut: [
-      [0.455, 0.030, 0.515, 0.955], /* inOutQuad */
-      [0.645, 0.045, 0.355, 1.000], /* inOutCubic */
-      [0.770, 0.000, 0.175, 1.000], /* inOutQuart */
-      [0.860, 0.000, 0.070, 1.000], /* inOutQuint */
-      [0.445, 0.050, 0.550, 0.950], /* inOutSine */
-      [1.000, 0.000, 0.000, 1.000], /* inOutExpo */
-      [0.785, 0.135, 0.150, 0.860], /* inOutCirc */
-      [0.680,-0.550, 0.265, 1.550], /* inOutBack */
-      (a, p) => t => t < .5 ? elastic(a, p)(t * 2) / 2 : 1 - elastic(a, p)(t * -2 + 2) / 2 /* inOutElastic */
-    ]
+  // Based on jQuery UI's implemenation of easing equations from Robert Penner (http://www.robertpenner.com/easing)
+
+  const eases = { linear: () => t => t };
+
+  const functionEasings = {
+    Sine: () => t => 1 - Math.cos(t * Math.PI / 2),
+    Circ: () => t => 1 - Math.sqrt(1 - t * t),
+    Back: () => t => t * t * (3 * t - 2),
+    Bounce: () => t => {
+      let pow2, b = 4;
+      while (t < (( pow2 = Math.pow(2, --b)) - 1) / 11) {};
+      return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow(( pow2 * 3 - 2 ) / 22 - t, 2)
+    },
+    Elastic: (amplitude = 1, period = .5) => {
+      const a = minMax(amplitude, 1, 10);
+      const p = minMax(period, .1, 2);
+      return t => {
+        return (t === 0 || t === 1) ? t : 
+          -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
+      }
+    }
   }
 
-  let eases = { 
-    linear: [0.250, 0.250, 0.750, 0.750]
-  }
+  const baseEasings = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo'];
 
-  for (let coords in curves) {
-    curves[coords].forEach((ease, i) => {
-      eases['ease'+coords+names[i]] = ease;
-    });
-  }
+  baseEasings.forEach((name, i) => {
+    functionEasings[name] = () => t => Math.pow(t, i + 2);
+  });
+
+  Object.keys(functionEasings).forEach(name => {
+    const easeIn = functionEasings[name];
+    eases['easeIn' + name] = easeIn;
+    eases['easeOut' + name] = (a, b) => t => 1 - easeIn(a, b)(1 - t);
+    eases['easeInOut' + name] = (a, b) => t => t < 0.5 ? easeIn(a, b)(t * 2) / 2 : 
+      1 - easeIn(a, b)(t * -2 + 2) / 2;
+  });
 
   return eases;
 
@@ -285,7 +261,7 @@ function parseEasings(easing, duration) {
     case 'spring' : return spring(easing, duration);
     case 'cubicBezier' : return applyArguments(bezier, args);
     case 'steps' : return applyArguments(steps, args);
-    default : return is.fnc(ease) ? applyArguments(ease, args) : applyArguments(bezier, ease);
+    default : return applyArguments(ease, args);
   }
 }
 

From 2d214342da5c5ef3f5109108a88ae80d9457eaab Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Tue, 23 Jul 2019 10:37:39 +0200
Subject: [PATCH 19/34] Update documentation

---
 documentation/examples/advanced-staggering-2.html |  2 +-
 documentation/examples/advanced-staggering.html   |  2 +-
 documentation/examples/anime-stagger-demo.html    |  2 +-
 documentation/examples/anime-staggering-demo.html | 13 ++++++++++---
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/documentation/examples/advanced-staggering-2.html b/documentation/examples/advanced-staggering-2.html
index 90715b32..172c77ef 100644
--- a/documentation/examples/advanced-staggering-2.html
+++ b/documentation/examples/advanced-staggering-2.html
@@ -93,7 +93,7 @@
 
     nextIndex = anime.random(0, numberOfElements);
 
-    anime.setValue('.cursor', {
+    anime.set('.cursor', {
       translateX: anime.stagger('-38px', {grid: [24, 11], from: index, axis: 'x'}),
       translateY: anime.stagger('-38px', {grid: [24, 11], from: index, axis: 'y'})
     });
diff --git a/documentation/examples/advanced-staggering.html b/documentation/examples/advanced-staggering.html
index 941b6a3a..cfa8d372 100644
--- a/documentation/examples/advanced-staggering.html
+++ b/documentation/examples/advanced-staggering.html
@@ -92,7 +92,7 @@
 
     nextIndex = anime.random(0, numberOfElements);
 
-    anime.setValue('.cursor', {
+    anime.set('.cursor', {
       translateX: anime.stagger('-1rem', {grid: [16, 16], from: index, axis: 'x'}),
       translateY: anime.stagger('-1rem', {grid: [16, 16], from: index, axis: 'y'})
     });
diff --git a/documentation/examples/anime-stagger-demo.html b/documentation/examples/anime-stagger-demo.html
index ce348915..728c72d6 100644
--- a/documentation/examples/anime-stagger-demo.html
+++ b/documentation/examples/anime-stagger-demo.html
@@ -82,7 +82,7 @@
     delay: anime.stagger(10, {from: 'center'})
   })
   .add({
-    scale: anime.stagger([2.5, 1], {from: 'center', easing: 'easeInSine'}),
+    scale: anime.stagger([2.5, 1], {from: 'center', easing: 'easeInOutCirc'}),
     translateX: anime.stagger([-200, 200]),
     translateY: anime.stagger([-200, 200]),
     rotate: 0,
diff --git a/documentation/examples/anime-staggering-demo.html b/documentation/examples/anime-staggering-demo.html
index 6c6046a4..bec0e87a 100644
--- a/documentation/examples/anime-staggering-demo.html
+++ b/documentation/examples/anime-staggering-demo.html
@@ -126,22 +126,29 @@
 
   anime({
     targets: '.easing-visualizer div',
+    translateZ: 0,
     translateY: (() => {
       const keyframes = [];
+      // keyframes.push({ value: 0, delay: stagger(.125) });
+      // keyframes.push({ value: stagger([0, -400], {easing: 'steps(10)'}), delay: stagger(.125) });
       for (let ease in anime.penner) {
         keyframes.push({
           value: stagger([0, -400], {easing: ease}),
           delay: stagger(.125)
         });
       };
-      keyframes.push({ value: stagger([0, -400], {easing: 'steps(10)'}), delay: stagger(.125) });
-      keyframes.push({ value: 0, delay: stagger(.125) });
       return keyframes;
     })(),
+    // translateY: {
+    //   value: stagger([0, -400], {easing:'easeInOutSine'}),
+    //   delay: stagger(.125)
+    // },
     easing: 'easeInOutSine',
-    duration: 16000,
+    duration: 6000,
     loop: true
   });
 
+  console.log(anime.penner);
+
 </script>
 </html>

From c00b4611bbab3ad13487c9b2495528bc2357d692 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Tue, 23 Jul 2019 15:32:13 +0200
Subject: [PATCH 20/34] Fix wrong unit parsing when unit contains spaces #502

---
 .../examples/anime-DOM-stress-test.html       |  11 +-
 .../examples/anime-complex-properties.html    |  40 +-
 documentation/examples/anime-stagger-2.html   | 299 -----------
 documentation/examples/anime-stagger-3.html   | 431 ---------------
 documentation/examples/anime-stagger-4.html   | 500 ------------------
 .../{anime-stager.html => anime-stagger.html} |   0
 .../examples/anime-states-system.html         | 115 ----
 lib/anime.es.js                               |   4 +-
 lib/anime.js                                  |   4 +-
 lib/anime.min.js                              |   2 +-
 src/index.js                                  |   4 +-
 11 files changed, 42 insertions(+), 1368 deletions(-)
 delete mode 100644 documentation/examples/anime-stagger-2.html
 delete mode 100644 documentation/examples/anime-stagger-3.html
 delete mode 100644 documentation/examples/anime-stagger-4.html
 rename documentation/examples/{anime-stager.html => anime-stagger.html} (100%)
 delete mode 100644 documentation/examples/anime-states-system.html

diff --git a/documentation/examples/anime-DOM-stress-test.html b/documentation/examples/anime-DOM-stress-test.html
index 116b88ea..c2f30e60 100644
--- a/documentation/examples/anime-DOM-stress-test.html
+++ b/documentation/examples/anime-DOM-stress-test.html
@@ -45,23 +45,22 @@
   function createEl(i) {
     var el = document.createElement('div');
     var hue = Math.round(360 / numberOfEls * i);
-    var angle = i;
     el.classList.add('el');
     //el.style.border = '5px solid hsl(' + hue + ', 50%, 50%)';
     el.style.backgroundColor = 'hsl(' + hue + ', 50%, 50%)';
     wrapperEl.appendChild(el);
     anime({
       targets: el,
-      translateX: Math.sin(angle) * distance + 'rem',
-      translateY: Math.cos(angle) * distance + 'rem',
+      translateX: Math.sin(i) * distance + 'rem',
+      translateY: Math.cos(i) * distance + 'rem',
       scale: [
-        {value: [0, 1]},
-        {value: 0}
+        {value: [.1, 2]},
+        {value: .1}
       ],
       easing: 'easeInOutSine',
       loop: true,
       duration: duration,
-      startTime: i * (duration / numberOfEls)
+      delay: i * (duration / numberOfEls)
     });
   };
 
diff --git a/documentation/examples/anime-complex-properties.html b/documentation/examples/anime-complex-properties.html
index 37ea8b04..3467b289 100644
--- a/documentation/examples/anime-complex-properties.html
+++ b/documentation/examples/anime-complex-properties.html
@@ -14,7 +14,7 @@
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
   <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <!-- <script src="../../lib/anime.min.js"></script> -->
   <!-- <script src="../assets/js/anime/anime.1.3.js"></script> -->
@@ -22,6 +22,7 @@
   <style>
     body {
       display: flex;
+      flex-wrap: wrap;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
@@ -40,18 +41,22 @@
     .clip-path {
       border-radius: 0;
     }
+    .auto-property {
+      background-image: radial-gradient(50% 100%, #FFF7A0 50%, #FF7A6D 100%);
+      background-size: auto 100px;
+    }
   </style>
 </head>
 <body>
-  <div class="box-shadow item color-01"></div>
-  <div class="unit-less item color-03"></div>
-  <div class="specified-unit item color-05"></div>
-  <div class="filter item color-07"></div>
-  <div class="rgba item color-09"></div>
-  <div class="calc item color-11"></div>
-  <div class="zero-value item color-02"></div>
-  <div class="round-value item color-04"></div>
-  <div class="clip-path item color-06"></div>
+  <div class="box-shadow item color-red"></div>
+  <div class="unit-less item color-orange"></div>
+  <div class="specified-unit item color-lightorange"></div>
+  <div class="filter item color-yellow"></div>
+  <div class="rgba item color-citrus"></div>
+  <div class="calc item color-green"></div>
+  <div class="zero-value item color-darkgreen"></div>
+  <div class="round-value item color-turquoise"></div>
+  <div class="clip-path item color-skyblue"></div>
   <svg class="item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <g id="Page-1" fill="none" fill-rule="evenodd">
       <g id="svg" fill="#A7FF87">
@@ -60,7 +65,8 @@
     </g>
   </svg>
   <input class="item" type="range" value="0" min="0" max="100">
-  <div class="basic-css color-01 item"></div>
+  <div class="basic-css color-lavender item"></div>
+  <div class="auto-property color-purple item"></div>
   <script type="module">
     
     import anime from "../../src/index.js";
@@ -149,8 +155,16 @@
     });
     var basicCSS = anime({
       targets: '.basic-css',
-      width: 100,
-      height: 100,
+      width: 50,
+      height: 50,
+      loop: true,
+      direction: 'alternate',
+      easing: 'linear'
+    });
+    var autoProperty = anime({
+      targets: '.auto-property',
+      backgroundSize: ['auto 10px', 'auto 400px'],
+      margin: '20% 40px 10px 30px',
       loop: true,
       direction: 'alternate',
       easing: 'linear'
diff --git a/documentation/examples/anime-stagger-2.html b/documentation/examples/anime-stagger-2.html
deleted file mode 100644
index 303c754b..00000000
--- a/documentation/examples/anime-stagger-2.html
+++ /dev/null
@@ -1,299 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>stagger | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
-  <link href="../assets/css/documentation.css" rel="stylesheet">
-  <style>
-
-    body {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-color: #000;
-    }
-
-    .testarea {
-      position: fixed;
-      z-index: 1;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-      width: calc( 20 * 2rem);
-      height: calc( 20 * 2rem);
-      perspective: 100px;
-    }
-
-    .el {
-      width: 2rem;
-      height: 2rem;
-      /*background-color: currentColor;*/
-      background-color: #000;
-      border: 2px solid currentColor;
-    }
-
-    /* Player animation */
-
-    .timeline {
-      opacity: .2;
-      position: absolute;
-      flex-shrink: 0;
-      width: 100%;
-      height: 100%;
-      padding-top: 4px;
-    }
-
-    .timeline.player-animation {
-      width: 100%;
-      left: 0;
-    }
-
-    .tl-needle {
-      position: fixed;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      width: 2px;
-      height: 100%;
-      margin-left: -1px;
-      background-color: #FFF;
-    }
-
-    .tl-animation {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      width: auto;
-      height: 8px;
-      margin-bottom: 4px;
-      background-color: currentColor;
-      border-radius: .5rem;
-    }
-
-    .tl-delay,
-    .tl-end-delay {
-      width: auto;
-      height: 100%;
-      background-color: rgba(0,0,0,.5);
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="testarea"></div>
-
-  <div class="log log-animation"></div>
-  <div class="time time-animation"></div>
-
-</body>
-<script type="module">
-
-  import anime from '../../src/index.js';
-
-  var animationTimeLogEl = document.querySelector('.time-animation');
-  var timelineTimeLogEl = document.querySelector('.time-timeline');
-
-  var testAreaEl = document.querySelector('.testarea');
-  var fragment = document.createDocumentFragment();
-  var colorIndex = 1;
-
-  for (var i = 0; i < 400; i++) {
-    var el = document.createElement('div');
-    el.classList.add('el');
-    el.classList.add('color-'+('0' + colorIndex).slice(-2));
-    colorIndex++;
-    if (colorIndex > 12) colorIndex = 1;
-    fragment.appendChild(el);
-  }
-
-  testAreaEl.appendChild(fragment);
-
-  var stagger = {
-    leftToRight: (spacing, min, max) => {
-      return (el, i, t) => {
-        let delay = i * spacing;
-        if (min) delay += min;
-        if (max) delay = i * ((max - min) / t);
-        return delay;
-      }
-    },
-    rightToLeft: spacing => {
-      return (el, i, t) => {
-        return ((t - 1) - i) * spacing;
-      }
-    },
-    centerOut: spacing => {
-      return (el, i, t) => {
-        return Math.abs(Math.round((t / 2) - i - 1)) * spacing
-      }
-    },
-    centerIn: spacing => {
-      return (el, i, t) => {
-        return (i >= t / 2 ? ((t - 1) - i) : i) * spacing
-      }
-    },
-    splash: (x, y, spacing) => {
-      return (el, i) => {
-        const rect = el.getBoundingClientRect();
-        const dx = x - (rect.left + (rect.width / 2));
-        const dy = y - (rect.top + (rect.height / 2));
-        const distance = Math.sqrt( dx * dx + dy * dy );
-        return (distance / 100) * spacing;
-      }
-    }
-  }
-
-  // anime.stagger(0, 1, 100);
-  // anime.stagger(1, 0, 100);
-  // anime.stagger(.5, 1, 100);
-  // anime.stagger(1, .5, 100);
-  // anime.stagger({x: window.innerWidth / 2, y: window.innerWidth / 2}, 1, 100);
-  // anime.stagger('-2rem', '2rem');
-
-  // anime.stagger.linear(100, true);
-  // anime.stagger.splash();
-
-  // anime.stagger.from.first([0, 200]);
-  // anime.stagger.from.last([0, 200]);
-  // anime.stagger.from.middle(100);
-  // anime.stagger.from.index(3, 100);
-  // anime.stagger.from.point({x: 2, y: 5}, 100);
-
-  // anime.stagger.to.first(100);
-  // anime.stagger.to.last(100);
-  // anime.stagger.to.middle(100);
-  // anime.stagger.to.index(3, 100);
-  // anime.stagger.to.point({x: 2, y: 5}, 100);
-
-  // anime.cycle.from.first([0, 200, 400]);
-  // anime.cycle.from.last([0, 200, 400]);
-  // anime.cycle.from.middle([-100, 100]);
-  // anime.cycle.from.index(3, [-2, 2]);
-  // anime.cycle.from.point({x: 2, y: 5}, 100);
-
-  // anime.cycle.to.first([0, 200, 400]);
-  // anime.cycle.to.last([0, 200, 400]);
-  // anime.cycle.to.middle([-100, 100]);
-  // anime.cycle.to.index(3, [-2, 2]);
-  // anime.cycle.to.point({x: 2, y: 5}, 100);
-
-
-  var animation = anime({
-    targets: '.el',
-    //translateX: function() {return anime.random(-100, 100)},
-    translateY: function() {return anime.random(-100, 100)},
-    rotate: function() {return anime.random(-360, 360)},
-    //scale: function() {return anime.random(50, 200) / 100},
-    // backgroundColor: {value: 'rgba(0,0,0,1)', easing: 'easeOutQuad'},
-    // border: {value: '1px solid currentColor', easing: 'easeOutQuad'},
-    delay: stagger.splash(window.innerWidth / 2, window.innerHeight / 2, 200),
-    easing: 'easeOutQuad',
-    direction: 'alternate',
-    loop: true
-  });
-
-  // var animation = anime({
-  //   targets: '.el',
-  //   //translateZ: 40,
-  //   scale: function(el, i, t) { var func = stagger.splash(window.innerWidth / 2, window.innerHeight / 2, 1.1); return 1.1 - func(el, i, t); },
-  //   rotate: function(el, i, t) { var func = stagger.splash(window.innerWidth / 2, window.innerHeight / 2, 20); return 20 - func(el, i, t); },
-  //   delay: stagger.splash(window.innerWidth / 2, window.innerHeight / 2, 500),
-  //   easing: 'easeInOutCirc',
-  //   duration: 2000,
-  //   direction: 'alternate',
-  //   loop: true
-  // });
-
-  function animePlayer(instance, playerClass) {
-
-    function createEl(type, className, parentEl) {
-      var el = document.createElement(type);
-      if (className) el.classList.add(className);
-      if (parentEl) parentEl.appendChild(el);
-      return el;
-    }
-
-    var timelineEl = createEl('div', 'timeline', document.body);
-    if (playerClass) timelineEl.classList.add(playerClass);
-    var needleEl = createEl('div', 'tl-needle', timelineEl);
-    var animations = [];
-    var colors = ['#FF1461','#FF7C72','#FBF38C','#A6FF8F','#18FF92','#1CE2B2','#5EF3FB','#61C3FF','#5A87FF','#8453E3','#C26EFF','#FB89FB'];
-    var colorIndex = 0;
-
-    function convertMStoEM(ms) { return ms / 100; }
-    function convertEMtoMS(em) { return parseFloat(em) * 250; }
-
-    function createAnimationLog(animObj, timelineOffset) {
-      var anim = animObj;
-      anim.player = {};
-      anim.player.animationEl = createEl('div', 'tl-animation', timelineEl);
-      anim.player.delayEl = createEl('div', 'tl-delay', anim.player.animationEl);
-      anim.player.endDelayEl = createEl('div', 'tl-end-delay', anim.player.animationEl);
-      anim.update = function() {
-        anime.setValue(anim.player.animationEl, {
-          left: convertMStoEM(timelineOffset) + 'em',
-          width: convertMStoEM(anim.duration) + 'em'
-        });
-        anime.setValue(anim.player.delayEl, {width: (anim.delay / anim.duration) * 100 + '%'});
-        anime.setValue(anim.player.endDelayEl, {width: (anim.endDelay / anim.duration) * 100 + '%'});
-      }
-      anime.setValue(anim.player.animationEl, {color: colors[colorIndex]});
-      colorIndex++;
-      if (!colors[colorIndex]) colorIndex = 0;
-      anim.update();
-      animations.push(anim);
-      return anim;
-    }
-
-    instance.pause();
-
-    var playerAnimation = anime({
-      targets: needleEl,
-      translateX: convertMStoEM(instance.duration) + 'em',
-      duration: instance.duration,
-      direction: instance.direction,
-      loop: instance.loop,
-      easing: 'linear',
-      update: function(a) {
-        instance.seek(a.currentTime);
-      }
-    });
-
-    if (instance.children.length) {
-      instance.children.forEach(function(child) {
-        console.log(child.timelineOffset);
-        child.animations.forEach(function(anim) {
-          createAnimationLog(anim, child.timelineOffset);
-        });
-      })
-    } else {
-      instance.animations.forEach(function(anim) {
-        createAnimationLog(anim);
-      });
-    }
-
-  }
-
-  //animePlayer(animation, 'player-animation');
-
-</script>
-</html>
diff --git a/documentation/examples/anime-stagger-3.html b/documentation/examples/anime-stagger-3.html
deleted file mode 100644
index ada1ba51..00000000
--- a/documentation/examples/anime-stagger-3.html
+++ /dev/null
@@ -1,431 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>stagger | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
-  <link href="../assets/css/documentation.css" rel="stylesheet">
-  <style>
-
-    body {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .testarea {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      flex-wrap: wrap;
-      flex-shrink: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .demo {
-      position: relative;
-      width: auto;
-      height: 4rem;
-      padding: 2rem;
-    }
-
-    .demo-title {
-      position: absolute;
-      top: 0;
-      left: 2rem;
-    }
-
-    .demo div {
-      width: 2rem;
-      height: 2rem;
-      /*background-color: currentColor;*/
-      border: 2px solid currentColor;
-    }
-
-    /* Player animation */
-
-    .timeline {
-      opacity: .2;
-      position: fixed;
-      flex-shrink: 0;
-      width: 100%;
-      height: 100%;
-      padding-top: 4px;
-    }
-
-    .timeline.player-animation {
-      width: 100%;
-      left: 0;
-    }
-
-    .tl-needle {
-      position: fixed;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      width: 2px;
-      height: 100%;
-      margin-left: -1px;
-      background-color: #FFF;
-    }
-
-    .tl-animation {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      width: auto;
-      height: 8px;
-      margin-bottom: 4px;
-      background-color: currentColor;
-      border-radius: .5rem;
-    }
-
-    .tl-delay,
-    .tl-end-delay {
-      width: auto;
-      height: 100%;
-      background-color: rgba(0,0,0,.5);
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="player-animation"></div>
-
-  <div class="testarea">
-
-    <section class="demo normal">
-      <h1 class="demo-title">Normal</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo normal-reversed">
-      <h1 class="demo-title">Normal reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-last">
-      <h1 class="demo-title">From last</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-last-reversed">
-      <h1 class="demo-title">From last reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-middle">
-      <h1 class="demo-title">From middle</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-middle-reversed">
-      <h1 class="demo-title">From middle reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-index">
-      <h1 class="demo-title">From index</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-index-reversed">
-      <h1 class="demo-title">From index reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range">
-      <h1 class="demo-title">Range</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-reversed">
-      <h1 class="demo-title">Range reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-from-last">
-      <h1 class="demo-title">Range from last</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-from-last-reversed">
-      <h1 class="demo-title">Range from last reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-from-middle">
-      <h1 class="demo-title">Range from middle</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-from-middle-reversed">
-      <h1 class="demo-title">Range from middle reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-  </div>
-
-</body>
-<script type="module">
-
-  import anime from '../../src/index.js';
-
-  // var animationTimeLogEl = document.querySelector('.time-animation');
-  // var timelineTimeLogEl = document.querySelector('.time-timeline');
-
-  // var testAreaEl = document.querySelector('.testarea');
-  // var fragment = document.createDocumentFragment();
-  // var colorIndex = 1;
-
-  // for (var i = 0; i < 10; i++) {
-  //   var el = document.createElement('div');
-  //   el.classList.add('el');
-  //   el.classList.add('color-'+('0' + colorIndex).slice(-2));
-  //   colorIndex++;
-  //   if (colorIndex > 12) colorIndex = 1;
-  //   fragment.appendChild(el);
-  // }
-
-  // testAreaEl.appendChild(fragment);
-
-  //   splash: (x, y, spacing) => {
-  //     return (el, i) => {
-  //       const rect = el.getBoundingClientRect();
-  //       const dx = x - (rect.left + (rect.width / 2));
-  //       const dy = y - (rect.top + (rect.height / 2));
-  //       const distance = Math.sqrt( dx * dx + dy * dy );
-  //       return (distance / 100) * spacing;
-  //     }
-
-  const is = {
-    arr: a => Array.isArray(a),
-    obj: a => stringContains(Object.prototype.toString.call(a), 'Object'),
-    pth: a => is.obj(a) && a.hasOwnProperty('totalLength'),
-    svg: a => a instanceof SVGElement,
-    dom: a => a.nodeType || is.svg(a),
-    str: a => typeof a === 'string',
-    fnc: a => typeof a === 'function',
-    und: a => typeof a === 'undefined',
-    hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a),
-    rgb: a => /^rgb/.test(a),
-    hsl: a => /^hsl/.test(a),
-    col: a => (is.hex(a) || is.rgb(a) || is.hsl(a))
-  }
-
-  function getUnit(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];
-  }
-
-  function stagger(val, params = {}) {
-    const direction = params.direction || 'normal';
-    const isRange = is.arr(val);
-    const val1 = isRange ? parseFloat(val[0]) : parseFloat(val);
-    const val2 = isRange ? parseFloat(val[1]) : 0;
-    let from = params.from || 0;
-    const start = params.start || 0 + (isRange ? val1 : 0);
-    const unit = getUnit(isRange ? val[1] : val) || 0;
-    return (el, i, t) => {
-      const spacing = isRange ? (val2 - val1) / (t - 1) : val1;
-      let index = i;
-      if (from === 'middle') from = (t - 1) / 2;
-      if (from === 'last') from = (t - 1);
-      if (from && !isNaN(from)) index = from - i;
-      //if (!isRange) index = Math.abs(index);
-      //index = Math.abs(index);
-      let progress = index;
-      if (direction === 'reverse') {
-        //progress = (t - 1) - index;
-        //if (from === 'middle') progress = progress - ((t - 1) / 2);
-        //if (from && !isNaN(from)) progress = progress ;
-        progress = progress;
-        console.log(progress);
-        //if (from && !isNaN(from)) progress = progress - 1;
-      }
-      //const progress = direction === 'reverse' ? (t - 1) - index : index;
-      //console.log(index, progress);
-      //const progress = direction === 'reverse' ? (t - 1 - (!isNaN(from) ? from : 0)) - index : index;
-      //console.log(start, spacing, progress, unit, t, index, !isNaN(from));
-      return start + (spacing * progress) + unit;
-    }
-  }
-
-  var animations = anime.timeline({
-    easing: 'easeInOutQuad',
-    //direction: 'alternate',
-    loop: true
-  })
-  // .add({
-  //   targets: '.normal div',
-  //   translateY: stagger('-1em'),
-  //   delay: stagger(200)
-  // }, 0)
-  // .add({
-  //   targets: '.normal-reversed div',
-  //   translateY: stagger('-1em', { direction: 'reverse' }),
-  //   delay: stagger(200, { direction: 'reverse' }),
-  // }, 0)
-  // .add({
-  //   targets: '.from-last div',
-  //   translateY: stagger('-1em', {from: 'last'}),
-  //   delay: stagger(200, {from: 'last'})
-  // }, 0)
-  // .add({
-  //   targets: '.from-last-reversed div',
-  //   translateY: stagger('-1em', { from: 'last', direction: 'reverse' }),
-  //   delay: stagger(200, { from: 'last', direction: 'reverse' }),
-  // }, 0)
-  // .add({
-  //   targets: '.from-middle div',
-  //   translateY: stagger('-1em', {from: 'middle'}),
-  //   delay: stagger(200, {from: 'middle'})
-  // }, 0)
-  // .add({
-  //   targets: '.from-middle-reversed div',
-  //   translateY: stagger('-1em', { from: 'middle', direction: 'reverse' }),
-  //   delay: stagger(200, { from: 'middle', direction: 'reverse' }),
-  // }, 0)
-  // .add({
-  //   targets: '.from-index div',
-  //   translateY: stagger('-1em', {from: 2}),
-  //   delay: stagger(200, {from: 2})
-  // }, 0)
-  .add({
-    targets: '.from-index-reversed div',
-    //translateY: stagger('-1em', { from: 2, direction: 'reverse' }),
-    translateY: 100,
-    delay: stagger(200, { from: 2, direction: 'reverse' }),
-  }, 0)
-  // .add({
-  //   targets: '.range div',
-  //   translateY: stagger(['-2rem', '2em']),
-  //   delay: stagger([0, 1000])
-  // }, 0)
-  // .add({
-  //   targets: '.range-reversed div',
-  //   translateY: stagger(['-2rem', '2em'], { direction: 'reverse'}),
-  //   delay: stagger([0, 1000], { direction: 'reverse'}),
-  // }, 0)
-  // .add({
-  //   targets: '.range-from-last div',
-  //   translateY: stagger(['-2rem', '2em'], {from: 'last'}),
-  //   delay: stagger([0, 1000], {from: 'last'})
-  // }, 0)
-  // .add({
-  //   targets: '.range-from-last-reversed div',
-  //   translateY: stagger(['-2rem', '2em'], { from: 'last', direction: 'reverse'}),
-  //   delay: stagger([0, 1000], { from: 'last', direction: 'reverse'}),
-  // }, 0)
-  // .add({
-  //   targets: '.range-from-middle div',
-  //   translateY: stagger(['-2rem', '2em'], {from: 'middle'}),
-  //   delay: stagger([0, 1000], {from: 'middle'})
-  // }, 0)
-  // .add({
-  //   targets: '.range-from-middle-reversed div',
-  //   translateY: stagger(['-2rem', '2em'], { from: 'middle', direction: 'reverse'}),
-  //   delay: stagger([0, 1000], { from: 'middle', direction: 'reverse'}),
-  // }, 0)
-
-
-  // var animation = anime({
-  //   targets: '.el',
-  //   //scaleY: stagger(.2, {from: 2, direction: 'reverse', start: 1}),
-  //   scale: .5,
-  //   //translateY: stagger(['-10rem', '10rem'], {from: 'middle', direction: 'reverse'}),
-  //   //translateY: stagger(1, {from: 'middle'}),
-  //   //delay: stagger([-100, 200], {direction: 'reverse', start: 1000}),
-  //   delay: stagger(80, {from: 2, direction: 'reverse'}),
-  //   easing: 'easeInOutQuad',
-  //   direction: 'alternate',
-  //   loop: true
-  // });
-
-  function animePlayer(instance, playerClass) {
-
-    function createEl(type, className, parentEl) {
-      var el = document.createElement(type);
-      if (className) el.classList.add(className);
-      if (parentEl) parentEl.appendChild(el);
-      return el;
-    }
-
-    var timelineEl = createEl('div', 'timeline', document.body);
-    if (playerClass) timelineEl.classList.add(playerClass);
-    var needleEl = createEl('div', 'tl-needle', timelineEl);
-    var animations = [];
-    var colors = ['#FF1461','#FF7C72','#FBF38C','#A6FF8F','#18FF92','#1CE2B2','#5EF3FB','#61C3FF','#5A87FF','#8453E3','#C26EFF','#FB89FB'];
-    var colorIndex = 0;
-
-    function convertMStoEM(ms) { return ms / 100; }
-    function convertEMtoMS(em) { return parseFloat(em) * 250; }
-
-    function createAnimationLog(animObj, timelineOffset) {
-      var anim = animObj;
-      anim.player = {};
-      anim.player.animationEl = createEl('div', 'tl-animation', timelineEl);
-      anim.player.delayEl = createEl('div', 'tl-delay', anim.player.animationEl);
-      anim.player.endDelayEl = createEl('div', 'tl-end-delay', anim.player.animationEl);
-      anim.update = function() {
-        anime.setValue(anim.player.animationEl, {
-          left: convertMStoEM(timelineOffset) + 'em',
-          width: convertMStoEM(anim.duration) + 'em'
-        });
-        anime.setValue(anim.player.delayEl, {width: (anim.delay / anim.duration) * 100 + '%'});
-        anime.setValue(anim.player.endDelayEl, {width: (anim.endDelay / anim.duration) * 100 + '%'});
-      }
-      anime.setValue(anim.player.animationEl, {color: colors[colorIndex]});
-      colorIndex++;
-      if (!colors[colorIndex]) colorIndex = 0;
-      anim.update();
-      animations.push(anim);
-      return anim;
-    }
-
-    instance.pause();
-
-    var playerAnimation = anime({
-      targets: needleEl,
-      translateX: convertMStoEM(instance.duration) + 'em',
-      duration: instance.duration,
-      direction: instance.direction,
-      loop: instance.loop,
-      easing: 'linear',
-      update: function(a) {
-        instance.seek(a.currentTime);
-      }
-    });
-
-    if (instance.children.length) {
-      instance.children.forEach(function(child) {
-        child.animations.forEach(function(anim) {
-          createAnimationLog(anim, child.timelineOffset);
-        });
-      })
-    } else {
-      instance.animations.forEach(function(anim) {
-        createAnimationLog(anim);
-      });
-    }
-
-  }
-
-  animePlayer(animations, 'player-animation');
-
-</script>
-</html>
diff --git a/documentation/examples/anime-stagger-4.html b/documentation/examples/anime-stagger-4.html
deleted file mode 100644
index 78c19b81..00000000
--- a/documentation/examples/anime-stagger-4.html
+++ /dev/null
@@ -1,500 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>stagger | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
-  <link href="../assets/css/documentation.css" rel="stylesheet">
-  <style>
-
-    body {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .testarea {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      flex-wrap: wrap;
-      flex-shrink: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    .demo {
-      flex-wrap: wrap;
-      position: relative;
-      align-items: center;
-      width: 14rem;
-      height: 4rem;
-      padding: 2rem;
-    }
-
-    .demo-title {
-      position: absolute;
-      top: 0;
-      left: 2rem;
-    }
-
-    .demo div {
-      width: 1rem;
-      height: 1rem;
-      /*background-color: currentColor;*/
-      border: 2px solid currentColor;
-    }
-
-    .from-coords, .from-coords-reversed {
-      padding: 3rem 3rem;
-    }
-
-    /* Player animation */
-
-    .timeline {
-      opacity: .2;
-      position: fixed;
-      flex-shrink: 0;
-      width: 100%;
-      height: 100%;
-      padding-top: 4px;
-    }
-
-    .timeline.player-animation {
-      width: 100%;
-      left: 0;
-    }
-
-    .tl-needle {
-      position: fixed;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      width: 2px;
-      height: 100%;
-      margin-left: -1px;
-      background-color: #FFF;
-    }
-
-    .tl-animation {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      width: auto;
-      height: 8px;
-      margin-bottom: 4px;
-      background-color: currentColor;
-      border-radius: .5rem;
-    }
-
-    .tl-delay,
-    .tl-end-delay {
-      width: auto;
-      height: 100%;
-      background-color: rgba(0,0,0,.5);
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="player-animation"></div>
-
-  <div class="testarea">
-
-    <section class="demo normal">
-      <h1 class="demo-title">Normal</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo normal-reversed">
-      <h1 class="demo-title">Normal reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-last">
-      <h1 class="demo-title">From last</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-last-reversed">
-      <h1 class="demo-title">From last reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-middle">
-      <h1 class="demo-title">From middle</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-middle-reversed">
-      <h1 class="demo-title">From middle reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-index">
-      <h1 class="demo-title">From index</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-index-reversed">
-      <h1 class="demo-title">From index reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range">
-      <h1 class="demo-title">Range</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-reversed">
-      <h1 class="demo-title">Range reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-from-last">
-      <h1 class="demo-title">Range from last</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-from-last-reversed">
-      <h1 class="demo-title">Range from last reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-from-middle">
-      <h1 class="demo-title">Range from middle</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo range-from-middle-reversed">
-      <h1 class="demo-title">Range from middle reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo easing">
-      <h1 class="demo-title">Easing</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo easing-reversed">
-      <h1 class="demo-title">Easing reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-coords">
-      <h1 class="demo-title">Coordinates</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-    <section class="demo from-coords-reversed">
-      <h1 class="demo-title">Coordinates reversed</h1>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
-    </section>
-
-  </div>
-
-</body>
-<script type="module">
-
-  import anime from '../../src/index.js';
-
-  // var animationTimeLogEl = document.querySelector('.time-animation');
-  // var timelineTimeLogEl = document.querySelector('.time-timeline');
-
-  // var testAreaEl = document.querySelector('.testarea');
-  // var fragment = document.createDocumentFragment();
-  // var colorIndex = 1;
-
-  // for (var i = 0; i < 10; i++) {
-  //   var el = document.createElement('div');
-  //   el.classList.add('el');
-  //   el.classList.add('color-'+('0' + colorIndex).slice(-2));
-  //   colorIndex++;
-  //   if (colorIndex > 12) colorIndex = 1;
-  //   fragment.appendChild(el);
-  // }
-
-  // testAreaEl.appendChild(fragment);
-
-  //   splash: (x, y, spacing) => {
-  //     return (el, i) => {
-  //       const rect = el.getBoundingClientRect();
-  //       const dx = x - (rect.left + (rect.width / 2));
-  //       const dy = y - (rect.top + (rect.height / 2));
-  //       const distance = Math.sqrt( dx * dx + dy * dy );
-  //       return (distance / 100) * spacing;
-  //     }
-
-  const is = {
-    arr: a => Array.isArray(a),
-    obj: a => stringContains(Object.prototype.toString.call(a), 'Object'),
-    pth: a => is.obj(a) && a.hasOwnProperty('totalLength'),
-    svg: a => a instanceof SVGElement,
-    dom: a => a.nodeType || is.svg(a),
-    str: a => typeof a === 'string',
-    fnc: a => typeof a === 'function',
-    und: a => typeof a === 'undefined',
-    hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a),
-    rgb: a => /^rgb/.test(a),
-    hsl: a => /^hsl/.test(a),
-    col: a => (is.hex(a) || is.rgb(a) || is.hsl(a))
-  }
-
-  function getUnit(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];
-  }
-
-  function stagger(val, params = {}) {
-    const direction = params.direction || 'normal';
-    const grid = params.grid;
-    const isRange = is.arr(val);
-    const val1 = isRange ? parseFloat(val[0]) : parseFloat(val);
-    const val2 = isRange ? parseFloat(val[1]) : 0;
-    const start = params.start || 0 + (isRange ? val1 : 0);
-    const easing = params.easing ? anime.easing(params.easing) : null;
-    const unit = getUnit(isRange ? val[1] : val) || 0;
-    const getCoords el => {
-      const rect = el.getBoundingClientRect();
-      return {x: rect.left + (rect.width / 2), y: rect.top + (rect.height / 2)}
-    }
-    const values = [];
-    let maxValue = 0;
-    let from = params.from || 0;
-    let intialValue = from;
-    return (el, i, t) => {
-      if (from === 'middle') intialValue = (t - 1) / 2;
-      if (from === 'last') intialValue = t - 1;
-      if (!values.length) {
-        for (let index = 0; index < t; index++) {
-          if (grid) {
-            const x = intialValue%grid[0];
-            const y = Math.ceil(intialValue/grid[1]);
-            // const x = 3.5;
-            // const y = 4.5;
-            const dx = x - index%grid[0];
-            const dy = y - Math.ceil(index/grid[1]);
-            console.log(x, y, index%grid[0]);
-            values.push(Math.sqrt(dx * dx + dy * dy));
-          } else {
-            values.push(Math.abs(intialValue - index));
-          }
-          maxValue = Math.max(...values);
-        }
-      }
-      let progress = values[i];
-      if (easing) progress = easing(progress / maxValue) * maxValue;
-      if (direction === 'reverse') progress = Math.abs(maxValue - progress);
-      const spacing = isRange ? (val2 - val1) / maxValue : val1;
-      return start + (spacing * progress) + unit;
-    }
-  }
-
-  var animations = anime.timeline({
-    easing: 'easeInOutQuad',
-    //direction: 'alternate',
-    //loop: true
-  })
-  // .add({
-  //   targets: '.normal div',
-  //   translateY: stagger('-.5em'),
-  //   delay: stagger(200)
-  // }, 0)
-  // .add({
-  //   targets: '.normal-reversed div',
-  //   translateY: stagger('-.5em', { direction: 'reverse' }),
-  //   delay: stagger(200, { direction: 'reverse' }),
-  // }, 0)
-  // .add({
-  //   targets: '.from-last div',
-  //   translateY: stagger('-.5em', {from: 'last'}),
-  //   delay: stagger(200, {from: 'last'})
-  // }, 0)
-  // .add({
-  //   targets: '.from-last-reversed div',
-  //   translateY: stagger('-.5em', { from: 'last', direction: 'reverse' }),
-  //   delay: stagger(200, { from: 'last', direction: 'reverse' }),
-  // }, 0)
-  // .add({
-  //   targets: '.from-middle div',
-  //   translateY: stagger('-.5em', {from: 'middle'}),
-  //   delay: stagger(200, {from: 'middle'})
-  // }, 0)
-  // .add({
-  //   targets: '.from-middle-reversed div',
-  //   translateY: stagger('-.5em', { from: 'middle', direction: 'reverse' }),
-  //   delay: stagger(200, { from: 'middle', direction: 'reverse' }),
-  // }, 0)
-  // .add({
-  //   targets: '.from-index div',
-  //   translateY: stagger('-.5em', {from: 3}),
-  //   delay: stagger(200, {from: 3})
-  // }, 0)
-  // .add({
-  //   targets: '.from-index-reversed div',
-  //   translateY: stagger('-.5em', { from: 3, direction: 'reverse' }),
-  //   delay: stagger(200, { from: 3, direction: 'reverse' }),
-  // }, 0)
-  // .add({
-  //   targets: '.range div',
-  //   translateY: stagger(['-2em', '2em']),
-  //   delay: stagger([0, 1000])
-  // }, 0)
-  // .add({
-  //   targets: '.range-reversed div',
-  //   translateY: stagger(['-2em', '2em'], { direction: 'reverse'}),
-  //   delay: stagger([0, 1000], { direction: 'reverse'}),
-  // }, 0)
-  // .add({
-  //   targets: '.range-from-last div',
-  //   translateY: stagger(['-2em', '2em'], {from: 'last'}),
-  //   delay: stagger([0, 1000], {from: 'last'})
-  // }, 0)
-  // .add({
-  //   targets: '.range-from-last-reversed div',
-  //   translateY: stagger(['-2em', '2em'], { from: 'last', direction: 'reverse'}),
-  //   delay: stagger([0, 1000], { from: 'last', direction: 'reverse'}),
-  // }, 0)
-  // .add({
-  //   targets: '.range-from-middle div',
-  //   translateY: stagger(['-2em', '2em'], {from: 'middle'}),
-  //   delay: stagger([0, 1000], {from: 'middle'})
-  // }, 0)
-  // .add({
-  //   targets: '.range-from-middle-reversed div',
-  //   translateY: stagger(['-2em', '2em'], { from: 'middle', direction: 'reverse'}),
-  //   delay: stagger([0, 1000], { from: 'middle', direction: 'reverse'}),
-  // }, 0)
-  // .add({
-  //   targets: '.easing div',
-  //   translateY: stagger(['2em', '-2em'], {easing: 'easeInOutQuart'}),
-  //   delay: stagger(200, {easing: 'easeInOutQuart'})
-  // }, 0)
-  // .add({
-  //   targets: '.easing-reversed div',
-  //   translateY: stagger(['2em', '-2em'], { direction: 'reverse', easing: 'easeInOutQuart'}),
-  //   delay: stagger(200, { direction: 'reverse', easing: 'easeInOutQuart'}),
-  // }, 0)
-  .add({
-    targets: '.from-coords div',
-    scale: stagger([0, 1], {grid: [8, 6], from: 19.5}),
-    delay: stagger(200, {grid: [8, 6], from: 19.5})
-  }, 0)
-  .add({
-    targets: '.from-coords-reversed div',
-    scale: stagger([0, 1], {grid: [8, 6], direction: 'reverse'}),
-    delay: stagger(200, {grid: [8, 6], direction: 'reverse'})
-  }, 0)
-  // .add({
-  //   targets: '.from-coords-reversed div',
-  //   scale: stagger([.1, 1], { direction: 'reverse', from: 'middle'}),
-  //   delay: stagger(200, { direction: 'reverse', from: 'middle'}),
-  // }, 0)
-
-  // var animation = anime({
-  //   targets: '.el',
-  //   //scaleY: stagger(.2, {from: 2, direction: 'reverse', start: 1}),
-  //   scale: .5,
-  //   //translateY: stagger(['-10rem', '10rem'], {from: 'middle', direction: 'reverse'}),
-  //   //translateY: stagger(1, {from: 'middle'}),
-  //   //delay: stagger([-100, 200], {direction: 'reverse', start: 1000}),
-  //   delay: stagger(80, {from: 2, direction: 'reverse'}),
-  //   easing: 'easeInOutQuad',
-  //   direction: 'alternate',
-  //   loop: true
-  // });
-
-  function animePlayer(instance, playerClass) {
-
-    function createEl(type, className, parentEl) {
-      var el = document.createElement(type);
-      if (className) el.classList.add(className);
-      if (parentEl) parentEl.appendChild(el);
-      return el;
-    }
-
-    var timelineEl = createEl('div', 'timeline', document.body);
-    if (playerClass) timelineEl.classList.add(playerClass);
-    var needleEl = createEl('div', 'tl-needle', timelineEl);
-    var animations = [];
-    var colors = ['#FF1461','#FF7C72','#FBF38C','#A6FF8F','#18FF92','#1CE2B2','#5EF3FB','#61C3FF','#5A87FF','#8453E3','#C26EFF','#FB89FB'];
-    var colorIndex = 0;
-
-    function convertMStoEM(ms) { return ms / 100; }
-    function convertEMtoMS(em) { return parseFloat(em) * 250; }
-
-    function createAnimationLog(animObj, timelineOffset) {
-      var anim = animObj;
-      anim.player = {};
-      anim.player.animationEl = createEl('div', 'tl-animation', timelineEl);
-      anim.player.delayEl = createEl('div', 'tl-delay', anim.player.animationEl);
-      anim.player.endDelayEl = createEl('div', 'tl-end-delay', anim.player.animationEl);
-      anim.update = function() {
-        anime.setValue(anim.player.animationEl, {
-          left: convertMStoEM(timelineOffset) + 'em',
-          width: convertMStoEM(anim.duration) + 'em'
-        });
-        anime.setValue(anim.player.delayEl, {width: (anim.delay / anim.duration) * 100 + '%'});
-        anime.setValue(anim.player.endDelayEl, {width: (anim.endDelay / anim.duration) * 100 + '%'});
-      }
-      anime.setValue(anim.player.animationEl, {color: colors[colorIndex]});
-      colorIndex++;
-      if (!colors[colorIndex]) colorIndex = 0;
-      anim.update();
-      animations.push(anim);
-      return anim;
-    }
-
-    instance.pause();
-
-    var playerAnimation = anime({
-      targets: needleEl,
-      translateX: convertMStoEM(instance.duration) + 'em',
-      duration: instance.duration,
-      direction: instance.direction,
-      loop: instance.loop,
-      easing: 'linear',
-      update: function(a) {
-        instance.seek(a.currentTime);
-      }
-    });
-
-    if (instance.children.length) {
-      instance.children.forEach(function(child) {
-        child.animations.forEach(function(anim) {
-          createAnimationLog(anim, child.timelineOffset);
-        });
-      })
-    } else {
-      instance.animations.forEach(function(anim) {
-        createAnimationLog(anim);
-      });
-    }
-
-  }
-
-  animePlayer(animations, 'player-animation');
-
-</script>
-</html>
diff --git a/documentation/examples/anime-stager.html b/documentation/examples/anime-stagger.html
similarity index 100%
rename from documentation/examples/anime-stager.html
rename to documentation/examples/anime-stagger.html
diff --git a/documentation/examples/anime-states-system.html b/documentation/examples/anime-states-system.html
deleted file mode 100644
index b9fe5734..00000000
--- a/documentation/examples/anime-states-system.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Anime states system | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
-  <link href="../assets/css/documentation.css" rel="stylesheet">
-  <style>
-
-    body {
-      display: flex;
-      flex-wrap: no-wrap;
-      justify-content: space-around;
-      align-items: center;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-
-    .states-example {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100px;
-      height: 100px;
-      border: 2px solid currentColor;
-      text-align: center;
-    }
-
-    .states-box {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100px;
-      height: 100px;
-      border: 2px solid currentColor;
-      text-align: center;
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="states-example color-01"></div>
-  <div class="states-box color-01"></div>
-  <nav>
-    <button value="default">Default</button>
-    <button value="circle">Circle</button>
-    <button value="rectangle">Rectangle</button>
-  </nav>
-
-</body>
-<script type="module">
-
-  import anime from '../../src/index.js';
-
-  var statesExampleEl = document.querySelector('.states-example');
-  var buttons = document.querySelectorAll('button');
-
-  window.statesExample = anime({
-    targets: statesExampleEl,
-    scaleX: 1,
-    scaleY: 1,
-    borderRadius: '0%',
-    duration: 500,
-    easing: 'easeInOutQuad',
-    complete: function(anim) {
-      statesExampleEl.innerHTML = anim.currentState;
-    },
-    states: {
-      circle: {
-        borderRadius: '50%',
-        duration: 1000,
-        easing: 'easeInOutCirc'
-      },
-      rectangle: {
-        scaleX: 1.2,
-        scaleY: .7,
-      }
-    },
-  });
-
-anime({
-  targets: '.states-box',
-  easing: 'easeOutQuad',
-  states: {
-    open: {
-      rotate: 360
-    }
-  }
-})
-
-  for (var i = 0; i < buttons.length; i++) {
-    buttons[i].addEventListener('click', function() {
-      statesExample.animateTo(this.value);
-    });
-  }
-
-  //statesExample.animateTo('rectangle');
-
-
-  </script>
-  <!-- <script src="../assets/js/vendors/stats.min.js"></script> -->
-</html>
diff --git a/lib/anime.es.js b/lib/anime.es.js
index 9c52d3b1..c641ad37 100644
--- a/lib/anime.es.js
+++ b/lib/anime.es.js
@@ -489,9 +489,11 @@ function getRelativeValue(to, from) {
 
 function validateValue(val, unit) {
   if (is.col(val)) { return colorToRgb(val); }
+  if (/\s/g.test(val)) { return val; }
   var originalUnit = getUnit(val);
   var unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val;
-  return unit && !/\s/g.test(val) ? unitLess + unit : unitLess;
+  if (unit) { return unitLess + unit; }
+  return unitLess;
 }
 
 // getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes
diff --git a/lib/anime.js b/lib/anime.js
index f48317e5..67d98057 100644
--- a/lib/anime.js
+++ b/lib/anime.js
@@ -491,9 +491,11 @@ function getRelativeValue(to, from) {
 
 function validateValue(val, unit) {
   if (is.col(val)) { return colorToRgb(val); }
+  if (/\s/g.test(val)) { return val; }
   var originalUnit = getUnit(val);
   var unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val;
-  return unit && !/\s/g.test(val) ? unitLess + unit : unitLess;
+  if (unit) { return unitLess + unit; }
+  return unitLess;
 }
 
 // getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes
diff --git a/lib/anime.min.js b/lib/anime.min.js
index 0f84643a..fc84a898 100644
--- a/lib/anime.min.js
+++ b/lib/anime.min.js
@@ -5,4 +5,4 @@
  * animejs.com
  */
 
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},t=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],r={CSS:{},springs:{}};function a(n,e,t){return Math.min(Math.max(n,e),t)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(t){return!n.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var t=c(n),o=a(i.und(t[0])?1:t[0],.1,100),u=a(i.und(t[1])?100:t[1],.1,100),s=a(i.und(t[2])?10:t[2],.1,100),f=a(i.und(t[3])?0:t[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var t=e?e*n/1e3:n;return t=d<1?Math.exp(-t*d*l)*(h*Math.cos(p*t)+v*Math.sin(p*t)):(h+v*t)*Math.exp(-t*l),0===n||1===n?n:1-t}return e?g:function(){var e=r.springs[n];if(e)return e;for(var t=0,a=0;;)if(1===g(t+=1/6)){if(++a>=16)break}else a=0;var o=t*(1/6)*1e3;return r.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function t(n,e){return 1-3*e+3*n}function r(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((t(e,o)*n+r(e,o))*n+a(e))*n}function u(n,e,o){return 3*t(e,o)*n*n+2*r(e,o)*n+a(e)}return function(t,r,a,i){if(0<=t&&t<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(t!==r||a!==i)for(var s=0;s<n;++s)c[s]=o(s*e,t,a);return function(n){return t===r&&a===i?n:0===n||1===n?n:o(f(n),r,i)}}function f(r){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=r;++s)i+=e;var l=i+(r-c[--s])/(c[s+1]-c[s])*e,d=u(l,t,a);return d>=.001?function(n,e,t,r){for(var a=0;a<4;++a){var i=u(e,t,r);if(0===i)return e;e-=(o(e,t,r)-n)/i}return e}(r,l,t,a):0===d?l:function(n,e,t,r,a){for(var u,i,c=0;(u=o(i=e+(t-e)/2,r,a)-n)>0?t=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(r,i,i+e,t,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var t=a(n,1,10),r=a(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,t){return function(r){return 1-e(n,t)(1-r)}},l["easeInOut"+n]=function(n,t){return function(r){return r<.5?e(n,t)(2*r)/2:1-e(n,t)(-2*r+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var t=n.split("(")[0],r=h[t],a=c(n);switch(t){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(r,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var t=n.length,r=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<t;o++)if(o in n){var u=n[o];e.call(r,u,o,n)&&a.push(u)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var t in n)e[t]=n[t];return e}function w(n,e){var t=x(n);for(var r in n)t[r]=e.hasOwnProperty(r)?e[r]:n[r];return t}function k(n,e){var t=x(n);for(var r in e)t[r]=i.und(n[r])?e[r]:n[r];return t}function O(n){return i.rgb(n)?(t=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+t[1]+",1)":e:i.hex(n)?(r=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,t,r){return e+e+t+t+r+r}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,t,r,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,u=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}if(0==u)e=t=r=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),t=s(l,f,o),r=s(l,f,o-1/3)}return"rgba("+255*e+","+255*t+","+255*r+","+c+")"}(n):void 0;var e,t,r,a}function C(n){var e=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[2]}function P(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function I(n,e){return n.getAttribute(e)}function B(n,e,t){if(M([t,"deg","rad","turn"],C(e)))return e;var a=r.CSS[e+t];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+t;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return r.CSS[e+t]=s,s}function D(n,e,t){if(e in n.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0";return t?B(n,a,t):a}}function T(n,e){return i.dom(n)&&!i.inp(n)&&(I(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(t,e)?"transform":i.dom(n)&&"transform"!==e&&D(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function F(n,e,t,r){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return t&&(t.transforms.list.set(e,i),t.transforms.last=e),r?B(n,i,r):i}function N(n,e,t,r){switch(T(n,e)){case"transform":return F(n,e,r,t);case"css":return D(n,e,t);case"attribute":return I(n,e);default:return n[e]||0}}function A(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+o+r;case"-":return a-o+r;case"*":return a*o+r}}function L(n,e){if(i.col(n))return O(n);var t=C(n),r=t?n.substr(0,n.length-t.length):n;return e&&!/\s/g.test(n)?r+e:r}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,t=n.points,r=0,a=0;a<t.numberOfItems;a++){var o=t.getItem(a);a>0&&(r+=j(e,o)),e=o}return r}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*I(o,"r");case"rect":return 2*I(a=n,"width")+2*I(a,"height");case"line":return j({x:I(r=n,"x1"),y:I(r,"y1")},{x:I(r,"x2"),y:I(r,"y2")});case"polyline":return S(n);case"polygon":return t=(e=n).points,S(e)+j(t.getItem(t.numberOfItems-1),t.getItem(0))}var e,t,r,a,o}function $(n,e){var t=e||{},r=t.el||function(n){for(var e=n.parentNode;i.svg(e)&&(e=e.parentNode,i.svg(e.parentNode)););return e}(n),a=r.getBoundingClientRect(),o=I(r,"viewBox"),u=a.width,c=a.height,s=t.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:r,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function t(t){void 0===t&&(t=0);var r=e+t>=1?e+t:0;return n.el.getPointAtLength(r)}var r=$(n.el,n.svg),a=t(),o=t(-1),u=t(1);switch(n.property){case"x":return(a.x-r.x)*r.w;case"y":return(a.y-r.y)*r.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var t=/-?\d*\.?\d+/g,r=L(i.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:i.str(n)||e?r.split(t):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,t){return t.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,t){return{target:n,id:t,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var t=x(e);if(/^spring/.test(t.easing)&&(t.duration=s(t.easing)),i.arr(n)){var r=n.length;2===r&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(t.duration=e.duration/r)}var a=i.arr(n)?n:[n];return a.map(function(n,t){var r=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(r.delay)&&(r.delay=t?0:e.delay),i.und(r.endDelay)&&(r.endDelay=t===a.length-1?e.endDelay:0),r}).map(function(n){return k(n,t)})}function z(n,e){var t=[],r=e.keyframes;for(var a in r&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),t={},r=function(r){var a=e[r];t[a]=n.map(function(n){var e={};for(var t in n)i.key(t)?t==a&&(e.value=n[t]):e[t]=n[t];return e})},a=0;a<e.length;a++)r(a);return t}(r),e)),e)i.key(a)&&t.push({name:a,tweens:V(e[a],n)});return t}function H(n,e){var t;return n.tweens.map(function(r){var a=function(n,e){var t={};for(var r in n){var a=P(n[r],e);i.arr(a)&&1===(a=a.map(function(n){return P(n,e)})).length&&(a=a[0]),t[r]=a}return t.duration=parseFloat(t.duration),t.delay=parseFloat(t.delay),t}(r,e),o=a.value,u=i.arr(o)?o[1]:o,c=C(u),s=N(e.target,n.name,c,e),f=t?t.to.original:s,l=i.arr(o)?o[0]:f,d=C(l)||C(s),p=c||d;return i.und(u)&&(u=f),a.from=Y(l,p),a.to=Y(A(u,l),p),a.start=t?t.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(o),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),t=a,a})}var G={css:function(n,e,t){return n.style[e]=t},attribute:function(n,e,t){return n.setAttribute(e,t)},object:function(n,e,t){return n[e]=t},transform:function(n,e,t,r,a){if(r.list.set(e,t),e===r.last||a){var o="";r.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function R(n,e){Q(n).forEach(function(n){for(var t in e){var r=P(e[t],n),a=n.target,o=C(r),u=N(a,t,o,n),i=A(L(r,o||C(u)),u),c=T(a,t);G[c](a,t,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var t=T(n.target,e.name);if(t){var r=H(e,n),a=r[r.length-1];return{type:t,property:e.name,animatable:n,tweens:r,duration:a.end,delay:r[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var t=n.length,r=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=t?Math.max.apply(Math,n.map(function(n){return r(n)+n.duration})):e.duration,a.delay=t?Math.min.apply(Math,n.map(function(n){return r(n)+n.delay})):e.delay,a.endDelay=t?a.duration-Math.max.apply(Math,n.map(function(n){return r(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var t=_.length;if(t){for(var r=0;r<t;){var a=_[r];if(a.paused){var o=_.indexOf(a);o>-1&&(_.splice(o,1),t=_.length)}else a.tick(e);r++}n()}else U=cancelAnimationFrame(U)}return n}();function tn(t){void 0===t&&(t={});var r,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=t),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,r.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/tn.speed)}function P(n,e){e&&e.seek(n-e.timelineOffset)}function I(n){for(var e=0,t=M.animations,r=t.length;e<r;){var o=t[e],u=o.animatable,i=o.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],P=h[O];isNaN(P)||(g+=C?P+C:P+" ")}}else g=h[0];G[o.type](u.target,o.property,g,u.transforms),o.currentValue=g,e++}}function B(n){M[n]&&!M.passThrough&&M[n](M)}function D(n){var e=M.duration,t=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,r&&function(n){if(M.reversePlayback)for(var e=c;e--;)P(n,r[e]);else for(var t=0;t<c;t++)P(n,r[t])}(d),!M.began&&M.currentTime>0&&(M.began=!0,B("begin"),B("loopBegin")),d<=t&&0!==M.currentTime&&I(0),(d>=l&&M.currentTime!==e||!e)&&I(e),d>t&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,B("changeBegin")),B("change"),I(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,B("changeComplete")),M.currentTime=a(d,0,e),M.began&&B("update"),n>=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,B("loopComplete"),B("loopBegin"),"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,B("loopComplete"),B("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,r=M.children;for(var e=c=r.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,I(0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),D((i+(u-o))*tn.speed)},M.seek=function(n){D(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function rn(n,e){for(var t=e.length;t--;)M(n,e[t].animatable.target)&&e.splice(t,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),_=[]):nn.forEach(function(n){return n.play()})}),tn.version="3.0.1",tn.speed=1,tn.running=_,tn.remove=function(n){for(var e=Z(n),t=_.length;t--;){var r=_[t],a=r.animations,o=r.children;rn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;rn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||r.pause()}},tn.get=N,tn.set=R,tn.convertPx=B,tn.path=function(n,e){var t=i.str(n)?g(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:$(t),totalLength:q(t)*(r/100)}}},tn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},tn.stagger=function(n,e){void 0===e&&(e={});var t=e.direction||"normal",r=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:u%a[0],M=s?(a[1]-1)/2:Math.floor(u/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===o&&(k=-x),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(u-v));y=Math.max.apply(Math,m)}r&&(m=m.map(function(n){return r(n/y)*y})),"reverse"===t&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},tn.timeline=function(n){void 0===n&&(n={});var t=tn(n);return t.duration=0,t.add=function(r,a){var o=_.indexOf(t),u=t.children;function c(n){n.passThrough=!0}o>-1&&_.splice(o,1);for(var s=0;s<u.length;s++)c(u[s]);var f=k(r,w(e,n));f.targets=f.targets||n.targets;var l=t.duration;f.autoplay=!1,f.direction=t.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(t),t.seek(f.timelineOffset);var d=tn(f);c(d),u.push(d);var p=J(u,n);return t.delay=p.delay,t.endDelay=p.endDelay,t.duration=p.duration,t.seek(0),t.reset(),t.autoplay&&t.play(),t},t},tn.easing=v,tn.penner=h,tn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},tn});
\ No newline at end of file
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},t=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],r={CSS:{},springs:{}};function a(n,e,t){return Math.min(Math.max(n,e),t)}function u(n,e){return n.indexOf(e)>-1}function o(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return u(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(t){return!n.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var t=c(n),u=a(i.und(t[0])?1:t[0],.1,100),o=a(i.und(t[1])?100:t[1],.1,100),s=a(i.und(t[2])?10:t[2],.1,100),f=a(i.und(t[3])?0:t[3],.1,100),l=Math.sqrt(o/u),d=s/(2*Math.sqrt(o*u)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var t=e?e*n/1e3:n;return t=d<1?Math.exp(-t*d*l)*(h*Math.cos(p*t)+v*Math.sin(p*t)):(h+v*t)*Math.exp(-t*l),0===n||1===n?n:1-t}return e?g:function(){var e=r.springs[n];if(e)return e;for(var t=0,a=0;;)if(1===g(t+=1/6)){if(++a>=16)break}else a=0;var u=t*(1/6)*1e3;return r.springs[n]=u,u}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function t(n,e){return 1-3*e+3*n}function r(n,e){return 3*e-6*n}function a(n){return 3*n}function u(n,e,u){return((t(e,u)*n+r(e,u))*n+a(e))*n}function o(n,e,u){return 3*t(e,u)*n*n+2*r(e,u)*n+a(e)}return function(t,r,a,i){if(0<=t&&t<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(t!==r||a!==i)for(var s=0;s<n;++s)c[s]=u(s*e,t,a);return function(n){return t===r&&a===i?n:0===n||1===n?n:u(f(n),r,i)}}function f(r){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=r;++s)i+=e;var l=i+(r-c[--s])/(c[s+1]-c[s])*e,d=o(l,t,a);return d>=.001?function(n,e,t,r){for(var a=0;a<4;++a){var i=o(e,t,r);if(0===i)return e;e-=(u(e,t,r)-n)/i}return e}(r,l,t,a):0===d?l:function(n,e,t,r,a){for(var o,i,c=0;(o=u(i=e+(t-e)/2,r,a)-n)>0?t=i:e=i,Math.abs(o)>1e-7&&++c<10;);return i}(r,i,i+e,t,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var t=a(n,1,10),r=a(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,t){return function(r){return 1-e(n,t)(1-r)}},l["easeInOut"+n]=function(n,t){return function(r){return r<.5?e(n,t)(2*r)/2:1-e(n,t)(-2*r+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var t=n.split("(")[0],r=h[t],a=c(n);switch(t){case"spring":return s(n,e);case"cubicBezier":return o(p,a);case"steps":return o(f,a);default:return o(r,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var t=n.length,r=arguments.length>=2?arguments[1]:void 0,a=[],u=0;u<t;u++)if(u in n){var o=n[u];e.call(r,o,u,n)&&a.push(o)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var t in n)e[t]=n[t];return e}function w(n,e){var t=x(n);for(var r in n)t[r]=e.hasOwnProperty(r)?e[r]:n[r];return t}function k(n,e){var t=x(n);for(var r in e)t[r]=i.und(n[r])?e[r]:n[r];return t}function O(n){return i.rgb(n)?(t=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+t[1]+",1)":e:i.hex(n)?(r=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,t,r){return e+e+t+t+r+r}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,t,r,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),u=parseInt(a[1],10)/360,o=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}if(0==o)e=t=r=i;else{var f=i<.5?i*(1+o):i+o-i*o,l=2*i-f;e=s(l,f,u+1/3),t=s(l,f,u),r=s(l,f,u-1/3)}return"rgba("+255*e+","+255*t+","+255*r+","+c+")"}(n):void 0;var e,t,r,a}function C(n){var e=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[2]}function P(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function I(n,e){return n.getAttribute(e)}function B(n,e,t){if(M([t,"deg","rad","turn"],C(e)))return e;var a=r.CSS[e+t];if(!i.und(a))return a;var u=document.createElement(n.tagName),o=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;o.appendChild(u),u.style.position="absolute",u.style.width=100+t;var c=100/u.offsetWidth;o.removeChild(u);var s=c*parseFloat(e);return r.CSS[e+t]=s,s}function D(n,e,t){if(e in n.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0";return t?B(n,a,t):a}}function T(n,e){return i.dom(n)&&!i.inp(n)&&(I(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(t,e)?"transform":i.dom(n)&&"transform"!==e&&D(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function F(n,e,t,r){var a,o=u(e,"scale")?1:0+(u(a=e,"translate")||"perspective"===a?"px":u(a,"rotate")||u(a,"skew")?"deg":void 0),i=E(n).get(e)||o;return t&&(t.transforms.list.set(e,i),t.transforms.last=e),r?B(n,i,r):i}function N(n,e,t,r){switch(T(n,e)){case"transform":return F(n,e,r,t);case"css":return D(n,e,t);case"attribute":return I(n,e);default:return n[e]||0}}function A(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=C(n)||0,a=parseFloat(e),u=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+u+r;case"-":return a-u+r;case"*":return a*u+r}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var t=C(n),r=t?n.substr(0,n.length-t.length):n;return e?r+e:r}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,t=n.points,r=0,a=0;a<t.numberOfItems;a++){var u=t.getItem(a);a>0&&(r+=j(e,u)),e=u}return r}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return u=n,2*Math.PI*I(u,"r");case"rect":return 2*I(a=n,"width")+2*I(a,"height");case"line":return j({x:I(r=n,"x1"),y:I(r,"y1")},{x:I(r,"x2"),y:I(r,"y2")});case"polyline":return S(n);case"polygon":return t=(e=n).points,S(e)+j(t.getItem(t.numberOfItems-1),t.getItem(0))}var e,t,r,a,u}function $(n,e){var t=e||{},r=t.el||function(n){for(var e=n.parentNode;i.svg(e)&&(e=e.parentNode,i.svg(e.parentNode)););return e}(n),a=r.getBoundingClientRect(),u=I(r,"viewBox"),o=a.width,c=a.height,s=t.viewBox||(u?u.split(" "):[0,0,o,c]);return{el:r,viewBox:s,x:s[0]/1,y:s[1]/1,w:o/s[2],h:c/s[3]}}function X(n,e){function t(t){void 0===t&&(t=0);var r=e+t>=1?e+t:0;return n.el.getPointAtLength(r)}var r=$(n.el,n.svg),a=t(),u=t(-1),o=t(1);switch(n.property){case"x":return(a.x-r.x)*r.w;case"y":return(a.y-r.y)*r.h;case"angle":return 180*Math.atan2(o.y-u.y,o.x-u.x)/Math.PI}}function Y(n,e){var t=/-?\d*\.?\d+/g,r=L(i.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:i.str(n)||e?r.split(t):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,t){return t.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,t){return{target:n,id:t,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var t=x(e);if(/^spring/.test(t.easing)&&(t.duration=s(t.easing)),i.arr(n)){var r=n.length;2===r&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(t.duration=e.duration/r)}var a=i.arr(n)?n:[n];return a.map(function(n,t){var r=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(r.delay)&&(r.delay=t?0:e.delay),i.und(r.endDelay)&&(r.endDelay=t===a.length-1?e.endDelay:0),r}).map(function(n){return k(n,t)})}function z(n,e){var t=[],r=e.keyframes;for(var a in r&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),t={},r=function(r){var a=e[r];t[a]=n.map(function(n){var e={};for(var t in n)i.key(t)?t==a&&(e.value=n[t]):e[t]=n[t];return e})},a=0;a<e.length;a++)r(a);return t}(r),e)),e)i.key(a)&&t.push({name:a,tweens:V(e[a],n)});return t}function H(n,e){var t;return n.tweens.map(function(r){var a=function(n,e){var t={};for(var r in n){var a=P(n[r],e);i.arr(a)&&1===(a=a.map(function(n){return P(n,e)})).length&&(a=a[0]),t[r]=a}return t.duration=parseFloat(t.duration),t.delay=parseFloat(t.delay),t}(r,e),u=a.value,o=i.arr(u)?u[1]:u,c=C(o),s=N(e.target,n.name,c,e),f=t?t.to.original:s,l=i.arr(u)?u[0]:f,d=C(l)||C(s),p=c||d;return i.und(o)&&(o=f),a.from=Y(l,p),a.to=Y(A(o,l),p),a.start=t?t.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(u),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),t=a,a})}var G={css:function(n,e,t){return n.style[e]=t},attribute:function(n,e,t){return n.setAttribute(e,t)},object:function(n,e,t){return n[e]=t},transform:function(n,e,t,r,a){if(r.list.set(e,t),e===r.last||a){var u="";r.list.forEach(function(n,e){u+=e+"("+n+") "}),n.style.transform=u}}};function R(n,e){Q(n).forEach(function(n){for(var t in e){var r=P(e[t],n),a=n.target,u=C(r),o=N(a,t,u,n),i=A(L(r,u||C(o)),o),c=T(a,t);G[c](a,t,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var t=T(n.target,e.name);if(t){var r=H(e,n),a=r[r.length-1];return{type:t,property:e.name,animatable:n,tweens:r,duration:a.end,delay:r[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var t=n.length,r=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=t?Math.max.apply(Math,n.map(function(n){return r(n)+n.duration})):e.duration,a.delay=t?Math.min.apply(Math,n.map(function(n){return r(n)+n.delay})):e.delay,a.endDelay=t?a.duration-Math.max.apply(Math,n.map(function(n){return r(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var t=_.length;if(t){for(var r=0;r<t;){var a=_[r];if(a.paused){var u=_.indexOf(a);u>-1&&(_.splice(u,1),t=_.length)}else a.tick(e);r++}n()}else U=cancelAnimationFrame(U)}return n}();function tn(t){void 0===t&&(t={});var r,u=0,o=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=t),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,r.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){u=0,o=O(M.currentTime)*(1/tn.speed)}function P(n,e){e&&e.seek(n-e.timelineOffset)}function I(n){for(var e=0,t=M.animations,r=t.length;e<r;){var u=t[e],o=u.animatable,i=u.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],P=h[O];isNaN(P)||(g+=C?P+C:P+" ")}}else g=h[0];G[u.type](o.target,u.property,g,o.transforms),u.currentValue=g,e++}}function B(n){M[n]&&!M.passThrough&&M[n](M)}function D(n){var e=M.duration,t=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,r&&function(n){if(M.reversePlayback)for(var e=c;e--;)P(n,r[e]);else for(var t=0;t<c;t++)P(n,r[t])}(d),!M.began&&M.currentTime>0&&(M.began=!0,B("begin"),B("loopBegin")),d<=t&&0!==M.currentTime&&I(0),(d>=l&&M.currentTime!==e||!e)&&I(e),d>t&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,B("changeBegin")),B("change"),I(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,B("changeComplete")),M.currentTime=a(d,0,e),M.began&&B("update"),n>=e&&(o=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(u=i,B("loopComplete"),B("loopBegin"),"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,B("loopComplete"),B("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,r=M.children;for(var e=c=r.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,I(0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,u||(u=i),D((i+(o-u))*tn.speed)},M.seek=function(n){D(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function rn(n,e){for(var t=e.length;t--;)M(n,e[t].animatable.target)&&e.splice(t,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),_=[]):nn.forEach(function(n){return n.play()})}),tn.version="3.0.1",tn.speed=1,tn.running=_,tn.remove=function(n){for(var e=Z(n),t=_.length;t--;){var r=_[t],a=r.animations,u=r.children;rn(e,a);for(var o=u.length;o--;){var i=u[o],c=i.animations;rn(e,c),c.length||i.children.length||u.splice(o,1)}a.length||u.length||r.pause()}},tn.get=N,tn.set=R,tn.convertPx=B,tn.path=function(n,e){var t=i.str(n)?g(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:$(t),totalLength:q(t)*(r/100)}}},tn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},tn.stagger=function(n,e){void 0===e&&(e={});var t=e.direction||"normal",r=e.easing?v(e.easing):null,a=e.grid,u=e.axis,o=e.from||0,c="first"===o,s="center"===o,f="last"===o,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(o=0),s&&(o=(i-1)/2),f&&(o=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:o%a[0],M=s?(a[1]-1)/2:Math.floor(o/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===u&&(k=-x),"y"===u&&(k=-w),m.push(k)}else m.push(Math.abs(o-v));y=Math.max.apply(Math,m)}r&&(m=m.map(function(n){return r(n/y)*y})),"reverse"===t&&(m=m.map(function(n){return u?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},tn.timeline=function(n){void 0===n&&(n={});var t=tn(n);return t.duration=0,t.add=function(r,a){var u=_.indexOf(t),o=t.children;function c(n){n.passThrough=!0}u>-1&&_.splice(u,1);for(var s=0;s<o.length;s++)c(o[s]);var f=k(r,w(e,n));f.targets=f.targets||n.targets;var l=t.duration;f.autoplay=!1,f.direction=t.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(t),t.seek(f.timelineOffset);var d=tn(f);c(d),o.push(d);var p=J(o,n);return t.delay=p.delay,t.endDelay=p.endDelay,t.duration=p.duration,t.seek(0),t.reset(),t.autoplay&&t.play(),t},t},tn.easing=v,tn.penner=h,tn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},tn});
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 8248aff7..82a895b9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -477,9 +477,11 @@ function getRelativeValue(to, from) {
 
 function validateValue(val, unit) {
   if (is.col(val)) return colorToRgb(val);
+  if (/\s/g.test(val)) return val;
   const originalUnit = getUnit(val);
   const unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val;
-  return unit && !/\s/g.test(val) ? unitLess + unit : unitLess;
+  if (unit) return unitLess + unit;
+  return unitLess;
 }
 
 // getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes

From b8dd07426f4d65effd79d50bcc183d4d63bfbce4 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Wed, 24 Jul 2019 12:09:54 +0200
Subject: [PATCH 21/34] Fix loopBegin callback beeing called twice

---
 documentation/examples/anime-callbacks.html | 60 +++++++++++++--------
 lib/anime.es.js                             | 22 +++++---
 lib/anime.js                                | 22 +++++---
 lib/anime.min.js                            |  2 +-
 src/index.js                                | 18 ++++---
 5 files changed, 79 insertions(+), 45 deletions(-)

diff --git a/documentation/examples/anime-callbacks.html b/documentation/examples/anime-callbacks.html
index 6e7c5b29..48ea5e5a 100644
--- a/documentation/examples/anime-callbacks.html
+++ b/documentation/examples/anime-callbacks.html
@@ -25,7 +25,8 @@
       align-items: center;
       position: absolute;
       width: 100%;
-      height: 100%;
+      height: 100vh;
+      padding-bottom: 50vh;
     }
 
     .el {
@@ -90,9 +91,9 @@
     /* Player animation */
 
     .timeline {
-      position: absolute;
+      position: fixed;
       bottom: 0;
-      height: 100px;
+      height: 50vh;
       padding-top: 4px;
       background-color: #000;
     }
@@ -168,28 +169,29 @@
     rotate: {
       value: 720,
       easing: 'easeInOutCirc',
-      duration: 1000,
+      duration: 500,
       delay: 500
     },
     opacity: {
       value: .5,
       easing: 'linear',
-      duration: 2000,
-      delay: 1500,
+      duration: 1000,
+      delay: 1000,
       endDelay: 0
     },
     delay: 1000,
-    endDelay: 1500,
-    duration: 2000,
+    endDelay: 500,
+    duration: 1000,
     easing: 'easeOutQuad',
-    direction: 'alternate',
-    loop: 3,
+    direction: 'reverse',
+    loop: 2,
     autoplay: false,
     update: function(a) {
       animationTimeLogEl.innerHTML = 'progress : ' + a.progress + '<br>currentTime : ' + a.currentTime;
     },
   });
 
+
   var tl = anime.timeline({
     targets: '.el.color-08',
     easing: 'easeInOutQuad',
@@ -198,7 +200,6 @@
     loop: 3,
     update: function(a) {
       timelineTimeLogEl.innerHTML = 'progress : ' + a.progress + '<br>currentTime : ' + a.currentTime;
-      // console.log(a.progress);
     }
   })
   .add({
@@ -214,9 +215,6 @@
   }, '-=500');
 
 
-  console.log(tl);
-
-
   function animePlayer(instance, playerClass) {
 
     function createEl(type, className, parentEl) {
@@ -243,14 +241,14 @@
       anim.player.delayEl = createEl('div', 'tl-delay', anim.player.animationEl);
       anim.player.endDelayEl = createEl('div', 'tl-end-delay', anim.player.animationEl);
       anim.update = function() {
-        anime.setValue(anim.player.animationEl, {
+        anime.set(anim.player.animationEl, {
           left: convertMStoEM(timelineOffset) + 'em',
           width: convertMStoEM(anim.duration) + 'em'
         });
-        anime.setValue(anim.player.delayEl, {width: (anim.delay / anim.duration) * 100 + '%'});
-        anime.setValue(anim.player.endDelayEl, {width: (anim.endDelay / anim.duration) * 100 + '%'});
+        anime.set(anim.player.delayEl, {width: (anim.delay / anim.duration) * 100 + '%'});
+        anime.set(anim.player.endDelayEl, {width: (anim.endDelay / anim.duration) * 100 + '%'});
       }
-      anime.setValue(anim.player.animationEl, {color: colors[colorIndex]});
+      anime.set(anim.player.animationEl, {color: colors[colorIndex]});
       colorIndex++;
       if (!colors[colorIndex]) colorIndex = 0;
       anim.update();
@@ -269,12 +267,14 @@
       easing: 'linear',
       update: function(a) {
         instance.seek(a.currentTime);
+      },
+      complete: function(a) {
+        instance.seek(a.currentTime);
       }
     });
 
     if (instance.children.length) {
       instance.children.forEach(function(child) {
-        console.log(child.timelineOffset);
         child.animations.forEach(function(anim) {
           createAnimationLog(anim, child.timelineOffset);
         });
@@ -328,9 +328,25 @@
 
   }
 
-  logCallbacks(animation, document.querySelector('.log-animation'), ['begin', 'loopBegin', 'changeBegin', 'change', 'changeComplete', 'loopComplete', 'complete']);
-
-  logCallbacks(tl, document.querySelector('.log-timeline'), ['begin', 'loopBegin', 'changeBegin', 'change', 'changeComplete', 'loopComplete', 'complete']);
+  logCallbacks(animation, document.querySelector('.log-animation'), [
+    'begin',
+    'loopBegin',
+    'changeBegin',
+    'change',
+    'changeComplete',
+    'loopComplete',
+    'complete'
+  ]);
+
+
+  logCallbacks(tl, document.querySelector('.log-timeline'), ['begin',
+    'loopBegin',
+    'changeBegin',
+    'change',
+    'changeComplete',
+    'loopComplete',
+    'complete'
+  ]);
 
 
 </script>
diff --git a/lib/anime.es.js b/lib/anime.es.js
index 0dc96339..c18ef272 100644
--- a/lib/anime.es.js
+++ b/lib/anime.es.js
@@ -559,8 +559,8 @@ function setDashoffset(el) {
 function getParentSvgEl(el) {
   var parentEl = el.parentNode;
   while (is.svg(parentEl)) {
-    parentEl = parentEl.parentNode;
     if (!is.svg(parentEl.parentNode)) { break; }
+    parentEl = parentEl.parentNode;
   }
   return parentEl;
 }
@@ -1024,6 +1024,9 @@ function anime(params) {
     if (!instance.began && instance.currentTime > 0) {
       instance.began = true;
       setCallback('begin');
+    }
+    if (!instance.loopBegan && instance.currentTime > 0) {
+      instance.loopBegan = true;
       setCallback('loopBegin');
     }
     if (insTime <= insDelay && instance.currentTime !== 0) {
@@ -1052,12 +1055,7 @@ function anime(params) {
     if (engineTime >= insDuration) {
       lastTime = 0;
       countIteration();
-      if (instance.remaining) {
-        startTime = now;
-        setCallback('loopComplete');
-        setCallback('loopBegin');
-        if (instance.direction === 'alternate') { toggleInstanceDirection(); }
-      } else {
+      if (!instance.remaining) {
         instance.paused = true;
         if (!instance.completed) {
           instance.completed = true;
@@ -1068,6 +1066,13 @@ function anime(params) {
             promise = makePromise(instance);
           }
         }
+      } else {
+        startTime = now;
+        setCallback('loopComplete');
+        instance.loopBegan = false;
+        if (instance.direction === 'alternate') {
+          toggleInstanceDirection();
+        }
       }
     }
   }
@@ -1079,6 +1084,7 @@ function anime(params) {
     instance.progress = 0;
     instance.paused = true;
     instance.began = false;
+    instance.loopBegan = false;
     instance.changeBegan = false;
     instance.completed = false;
     instance.changeCompleted = false;
@@ -1089,7 +1095,7 @@ function anime(params) {
     childrenLength = children.length;
     for (var i = childrenLength; i--;) { instance.children[i].reset(); }
     if (instance.reversed && instance.loop !== true || (direction === 'alternate' && instance.loop === 1)) { instance.remaining++; }
-    setAnimationsProgress(0);
+    setAnimationsProgress(instance.reversed ? instance.duration : 0);
   };
 
   // Set Value helper
diff --git a/lib/anime.js b/lib/anime.js
index 1925db27..0d868a31 100644
--- a/lib/anime.js
+++ b/lib/anime.js
@@ -561,8 +561,8 @@ function setDashoffset(el) {
 function getParentSvgEl(el) {
   var parentEl = el.parentNode;
   while (is.svg(parentEl)) {
-    parentEl = parentEl.parentNode;
     if (!is.svg(parentEl.parentNode)) { break; }
+    parentEl = parentEl.parentNode;
   }
   return parentEl;
 }
@@ -1026,6 +1026,9 @@ function anime(params) {
     if (!instance.began && instance.currentTime > 0) {
       instance.began = true;
       setCallback('begin');
+    }
+    if (!instance.loopBegan && instance.currentTime > 0) {
+      instance.loopBegan = true;
       setCallback('loopBegin');
     }
     if (insTime <= insDelay && instance.currentTime !== 0) {
@@ -1054,12 +1057,7 @@ function anime(params) {
     if (engineTime >= insDuration) {
       lastTime = 0;
       countIteration();
-      if (instance.remaining) {
-        startTime = now;
-        setCallback('loopComplete');
-        setCallback('loopBegin');
-        if (instance.direction === 'alternate') { toggleInstanceDirection(); }
-      } else {
+      if (!instance.remaining) {
         instance.paused = true;
         if (!instance.completed) {
           instance.completed = true;
@@ -1070,6 +1068,13 @@ function anime(params) {
             promise = makePromise(instance);
           }
         }
+      } else {
+        startTime = now;
+        setCallback('loopComplete');
+        instance.loopBegan = false;
+        if (instance.direction === 'alternate') {
+          toggleInstanceDirection();
+        }
       }
     }
   }
@@ -1081,6 +1086,7 @@ function anime(params) {
     instance.progress = 0;
     instance.paused = true;
     instance.began = false;
+    instance.loopBegan = false;
     instance.changeBegan = false;
     instance.completed = false;
     instance.changeCompleted = false;
@@ -1091,7 +1097,7 @@ function anime(params) {
     childrenLength = children.length;
     for (var i = childrenLength; i--;) { instance.children[i].reset(); }
     if (instance.reversed && instance.loop !== true || (direction === 'alternate' && instance.loop === 1)) { instance.remaining++; }
-    setAnimationsProgress(0);
+    setAnimationsProgress(instance.reversed ? instance.duration : 0);
   };
 
   // Set Value helper
diff --git a/lib/anime.min.js b/lib/anime.min.js
index fc84a898..cc4620db 100644
--- a/lib/anime.min.js
+++ b/lib/anime.min.js
@@ -5,4 +5,4 @@
  * animejs.com
  */
 
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},t=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],r={CSS:{},springs:{}};function a(n,e,t){return Math.min(Math.max(n,e),t)}function u(n,e){return n.indexOf(e)>-1}function o(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return u(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(t){return!n.hasOwnProperty(t)&&!e.hasOwnProperty(t)&&"targets"!==t&&"keyframes"!==t}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var t=c(n),u=a(i.und(t[0])?1:t[0],.1,100),o=a(i.und(t[1])?100:t[1],.1,100),s=a(i.und(t[2])?10:t[2],.1,100),f=a(i.und(t[3])?0:t[3],.1,100),l=Math.sqrt(o/u),d=s/(2*Math.sqrt(o*u)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var t=e?e*n/1e3:n;return t=d<1?Math.exp(-t*d*l)*(h*Math.cos(p*t)+v*Math.sin(p*t)):(h+v*t)*Math.exp(-t*l),0===n||1===n?n:1-t}return e?g:function(){var e=r.springs[n];if(e)return e;for(var t=0,a=0;;)if(1===g(t+=1/6)){if(++a>=16)break}else a=0;var u=t*(1/6)*1e3;return r.springs[n]=u,u}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function t(n,e){return 1-3*e+3*n}function r(n,e){return 3*e-6*n}function a(n){return 3*n}function u(n,e,u){return((t(e,u)*n+r(e,u))*n+a(e))*n}function o(n,e,u){return 3*t(e,u)*n*n+2*r(e,u)*n+a(e)}return function(t,r,a,i){if(0<=t&&t<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(t!==r||a!==i)for(var s=0;s<n;++s)c[s]=u(s*e,t,a);return function(n){return t===r&&a===i?n:0===n||1===n?n:u(f(n),r,i)}}function f(r){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=r;++s)i+=e;var l=i+(r-c[--s])/(c[s+1]-c[s])*e,d=o(l,t,a);return d>=.001?function(n,e,t,r){for(var a=0;a<4;++a){var i=o(e,t,r);if(0===i)return e;e-=(u(e,t,r)-n)/i}return e}(r,l,t,a):0===d?l:function(n,e,t,r,a){for(var o,i,c=0;(o=u(i=e+(t-e)/2,r,a)-n)>0?t=i:e=i,Math.abs(o)>1e-7&&++c<10;);return i}(r,i,i+e,t,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,t=4;n<((e=Math.pow(2,--t))-1)/11;);return 1/Math.pow(4,3-t)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var t=a(n,1,10),r=a(e,.1,2);return function(n){return 0===n||1===n?n:-t*Math.pow(2,10*(n-1))*Math.sin((n-1-r/(2*Math.PI)*Math.asin(1/t))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,t){return function(r){return 1-e(n,t)(1-r)}},l["easeInOut"+n]=function(n,t){return function(r){return r<.5?e(n,t)(2*r)/2:1-e(n,t)(-2*r+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var t=n.split("(")[0],r=h[t],a=c(n);switch(t){case"spring":return s(n,e);case"cubicBezier":return o(p,a);case"steps":return o(f,a);default:return o(r,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var t=n.length,r=arguments.length>=2?arguments[1]:void 0,a=[],u=0;u<t;u++)if(u in n){var o=n[u];e.call(r,o,u,n)&&a.push(o)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var t in n)e[t]=n[t];return e}function w(n,e){var t=x(n);for(var r in n)t[r]=e.hasOwnProperty(r)?e[r]:n[r];return t}function k(n,e){var t=x(n);for(var r in e)t[r]=i.und(n[r])?e[r]:n[r];return t}function O(n){return i.rgb(n)?(t=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+t[1]+",1)":e:i.hex(n)?(r=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,t,r){return e+e+t+t+r+r}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,t,r,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),u=parseInt(a[1],10)/360,o=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,t){return t<0&&(t+=1),t>1&&(t-=1),t<1/6?n+6*(e-n)*t:t<.5?e:t<2/3?n+(e-n)*(2/3-t)*6:n}if(0==o)e=t=r=i;else{var f=i<.5?i*(1+o):i+o-i*o,l=2*i-f;e=s(l,f,u+1/3),t=s(l,f,u),r=s(l,f,u-1/3)}return"rgba("+255*e+","+255*t+","+255*r+","+c+")"}(n):void 0;var e,t,r,a}function C(n){var e=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[2]}function P(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function I(n,e){return n.getAttribute(e)}function B(n,e,t){if(M([t,"deg","rad","turn"],C(e)))return e;var a=r.CSS[e+t];if(!i.und(a))return a;var u=document.createElement(n.tagName),o=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;o.appendChild(u),u.style.position="absolute",u.style.width=100+t;var c=100/u.offsetWidth;o.removeChild(u);var s=c*parseFloat(e);return r.CSS[e+t]=s,s}function D(n,e,t){if(e in n.style){var r=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(r)||"0";return t?B(n,a,t):a}}function T(n,e){return i.dom(n)&&!i.inp(n)&&(I(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(t,e)?"transform":i.dom(n)&&"transform"!==e&&D(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,t=n.style.transform||"",r=/(\w+)\(([^)]*)\)/g,a=new Map;e=r.exec(t);)a.set(e[1],e[2]);return a}}function F(n,e,t,r){var a,o=u(e,"scale")?1:0+(u(a=e,"translate")||"perspective"===a?"px":u(a,"rotate")||u(a,"skew")?"deg":void 0),i=E(n).get(e)||o;return t&&(t.transforms.list.set(e,i),t.transforms.last=e),r?B(n,i,r):i}function N(n,e,t,r){switch(T(n,e)){case"transform":return F(n,e,r,t);case"css":return D(n,e,t);case"attribute":return I(n,e);default:return n[e]||0}}function A(n,e){var t=/^(\*=|\+=|-=)/.exec(n);if(!t)return n;var r=C(n)||0,a=parseFloat(e),u=parseFloat(n.replace(t[0],""));switch(t[0][0]){case"+":return a+u+r;case"-":return a-u+r;case"*":return a*u+r}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var t=C(n),r=t?n.substr(0,n.length-t.length):n;return e?r+e:r}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,t=n.points,r=0,a=0;a<t.numberOfItems;a++){var u=t.getItem(a);a>0&&(r+=j(e,u)),e=u}return r}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return u=n,2*Math.PI*I(u,"r");case"rect":return 2*I(a=n,"width")+2*I(a,"height");case"line":return j({x:I(r=n,"x1"),y:I(r,"y1")},{x:I(r,"x2"),y:I(r,"y2")});case"polyline":return S(n);case"polygon":return t=(e=n).points,S(e)+j(t.getItem(t.numberOfItems-1),t.getItem(0))}var e,t,r,a,u}function $(n,e){var t=e||{},r=t.el||function(n){for(var e=n.parentNode;i.svg(e)&&(e=e.parentNode,i.svg(e.parentNode)););return e}(n),a=r.getBoundingClientRect(),u=I(r,"viewBox"),o=a.width,c=a.height,s=t.viewBox||(u?u.split(" "):[0,0,o,c]);return{el:r,viewBox:s,x:s[0]/1,y:s[1]/1,w:o/s[2],h:c/s[3]}}function X(n,e){function t(t){void 0===t&&(t=0);var r=e+t>=1?e+t:0;return n.el.getPointAtLength(r)}var r=$(n.el,n.svg),a=t(),u=t(-1),o=t(1);switch(n.property){case"x":return(a.x-r.x)*r.w;case"y":return(a.y-r.y)*r.h;case"angle":return 180*Math.atan2(o.y-u.y,o.x-u.x)/Math.PI}}function Y(n,e){var t=/-?\d*\.?\d+/g,r=L(i.pth(n)?n.totalLength:n,e)+"";return{original:r,numbers:r.match(t)?r.match(t).map(Number):[0],strings:i.str(n)||e?r.split(t):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,t){return t.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,t){return{target:n,id:t,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var t=x(e);if(/^spring/.test(t.easing)&&(t.duration=s(t.easing)),i.arr(n)){var r=n.length;2===r&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(t.duration=e.duration/r)}var a=i.arr(n)?n:[n];return a.map(function(n,t){var r=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(r.delay)&&(r.delay=t?0:e.delay),i.und(r.endDelay)&&(r.endDelay=t===a.length-1?e.endDelay:0),r}).map(function(n){return k(n,t)})}function z(n,e){var t=[],r=e.keyframes;for(var a in r&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),t={},r=function(r){var a=e[r];t[a]=n.map(function(n){var e={};for(var t in n)i.key(t)?t==a&&(e.value=n[t]):e[t]=n[t];return e})},a=0;a<e.length;a++)r(a);return t}(r),e)),e)i.key(a)&&t.push({name:a,tweens:V(e[a],n)});return t}function H(n,e){var t;return n.tweens.map(function(r){var a=function(n,e){var t={};for(var r in n){var a=P(n[r],e);i.arr(a)&&1===(a=a.map(function(n){return P(n,e)})).length&&(a=a[0]),t[r]=a}return t.duration=parseFloat(t.duration),t.delay=parseFloat(t.delay),t}(r,e),u=a.value,o=i.arr(u)?u[1]:u,c=C(o),s=N(e.target,n.name,c,e),f=t?t.to.original:s,l=i.arr(u)?u[0]:f,d=C(l)||C(s),p=c||d;return i.und(o)&&(o=f),a.from=Y(l,p),a.to=Y(A(o,l),p),a.start=t?t.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(u),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),t=a,a})}var G={css:function(n,e,t){return n.style[e]=t},attribute:function(n,e,t){return n.setAttribute(e,t)},object:function(n,e,t){return n[e]=t},transform:function(n,e,t,r,a){if(r.list.set(e,t),e===r.last||a){var u="";r.list.forEach(function(n,e){u+=e+"("+n+") "}),n.style.transform=u}}};function R(n,e){Q(n).forEach(function(n){for(var t in e){var r=P(e[t],n),a=n.target,u=C(r),o=N(a,t,u,n),i=A(L(r,u||C(o)),o),c=T(a,t);G[c](a,t,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var t=T(n.target,e.name);if(t){var r=H(e,n),a=r[r.length-1];return{type:t,property:e.name,animatable:n,tweens:r,duration:a.end,delay:r[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var t=n.length,r=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=t?Math.max.apply(Math,n.map(function(n){return r(n)+n.duration})):e.duration,a.delay=t?Math.min.apply(Math,n.map(function(n){return r(n)+n.delay})):e.delay,a.endDelay=t?a.duration-Math.max.apply(Math,n.map(function(n){return r(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var t=_.length;if(t){for(var r=0;r<t;){var a=_[r];if(a.paused){var u=_.indexOf(a);u>-1&&(_.splice(u,1),t=_.length)}else a.tick(e);r++}n()}else U=cancelAnimationFrame(U)}return n}();function tn(t){void 0===t&&(t={});var r,u=0,o=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=t),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,r.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){u=0,o=O(M.currentTime)*(1/tn.speed)}function P(n,e){e&&e.seek(n-e.timelineOffset)}function I(n){for(var e=0,t=M.animations,r=t.length;e<r;){var u=t[e],o=u.animatable,i=u.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],P=h[O];isNaN(P)||(g+=C?P+C:P+" ")}}else g=h[0];G[u.type](o.target,u.property,g,o.transforms),u.currentValue=g,e++}}function B(n){M[n]&&!M.passThrough&&M[n](M)}function D(n){var e=M.duration,t=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,r&&function(n){if(M.reversePlayback)for(var e=c;e--;)P(n,r[e]);else for(var t=0;t<c;t++)P(n,r[t])}(d),!M.began&&M.currentTime>0&&(M.began=!0,B("begin"),B("loopBegin")),d<=t&&0!==M.currentTime&&I(0),(d>=l&&M.currentTime!==e||!e)&&I(e),d>t&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,B("changeBegin")),B("change"),I(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,B("changeComplete")),M.currentTime=a(d,0,e),M.began&&B("update"),n>=e&&(o=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(u=i,B("loopComplete"),B("loopBegin"),"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,B("loopComplete"),B("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,r=M.children;for(var e=c=r.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,I(0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,u||(u=i),D((i+(o-u))*tn.speed)},M.seek=function(n){D(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function rn(n,e){for(var t=e.length;t--;)M(n,e[t].animatable.target)&&e.splice(t,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),_=[]):nn.forEach(function(n){return n.play()})}),tn.version="3.0.1",tn.speed=1,tn.running=_,tn.remove=function(n){for(var e=Z(n),t=_.length;t--;){var r=_[t],a=r.animations,u=r.children;rn(e,a);for(var o=u.length;o--;){var i=u[o],c=i.animations;rn(e,c),c.length||i.children.length||u.splice(o,1)}a.length||u.length||r.pause()}},tn.get=N,tn.set=R,tn.convertPx=B,tn.path=function(n,e){var t=i.str(n)?g(n)[0]:n,r=e||100;return function(n){return{property:n,el:t,svg:$(t),totalLength:q(t)*(r/100)}}},tn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},tn.stagger=function(n,e){void 0===e&&(e={});var t=e.direction||"normal",r=e.easing?v(e.easing):null,a=e.grid,u=e.axis,o=e.from||0,c="first"===o,s="center"===o,f="last"===o,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(o=0),s&&(o=(i-1)/2),f&&(o=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:o%a[0],M=s?(a[1]-1)/2:Math.floor(o/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===u&&(k=-x),"y"===u&&(k=-w),m.push(k)}else m.push(Math.abs(o-v));y=Math.max.apply(Math,m)}r&&(m=m.map(function(n){return r(n/y)*y})),"reverse"===t&&(m=m.map(function(n){return u?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},tn.timeline=function(n){void 0===n&&(n={});var t=tn(n);return t.duration=0,t.add=function(r,a){var u=_.indexOf(t),o=t.children;function c(n){n.passThrough=!0}u>-1&&_.splice(u,1);for(var s=0;s<o.length;s++)c(o[s]);var f=k(r,w(e,n));f.targets=f.targets||n.targets;var l=t.duration;f.autoplay=!1,f.direction=t.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(t),t.seek(f.timelineOffset);var d=tn(f);c(d),o.push(d);var p=J(o,n);return t.delay=p.delay,t.endDelay=p.endDelay,t.duration=p.duration,t.seek(0),t.reset(),t.autoplay&&t.play(),t},t},tn.easing=v,tn.penner=h,tn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},tn});
\ No newline at end of file
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},r=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],t={CSS:{},springs:{}};function a(n,e,r){return Math.min(Math.max(n,e),r)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var r=c(n),o=a(i.und(r[0])?1:r[0],.1,100),u=a(i.und(r[1])?100:r[1],.1,100),s=a(i.und(r[2])?10:r[2],.1,100),f=a(i.und(r[3])?0:r[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(h*Math.cos(p*r)+v*Math.sin(p*r)):(h+v*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function u(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,i){if(0<=r&&r<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(r!==t||a!==i)for(var s=0;s<n;++s)c[s]=o(s*e,r,a);return function(n){return r===t&&a===i?n:0===n||1===n?n:o(f(n),t,i)}}function f(t){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=t;++s)i+=e;var l=i+(t-c[--s])/(c[s+1]-c[s])*e,d=u(l,r,a);return d>=.001?function(n,e,r,t){for(var a=0;a<4;++a){var i=u(e,r,t);if(0===i)return e;e-=(o(e,r,t)-n)/i}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var u,i,c=0;(u=o(i=e+(r-e)/2,t,a)-n)>0?r=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(t,i,i+e,r,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,r=4;n<((e=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,r){return function(t){return 1-e(n,r)(1-t)}},l["easeInOut"+n]=function(n,r){return function(t){return t<.5?e(n,r)(2*t)/2:1-e(n,r)(-2*t+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var r=n.split("(")[0],t=h[r],a=c(n);switch(r){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(t,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<r;o++)if(o in n){var u=n[o];e.call(t,u,o,n)&&a.push(u)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var r in n)e[r]=n[r];return e}function w(n,e){var r=x(n);for(var t in n)r[t]=e.hasOwnProperty(t)?e[t]:n[t];return r}function k(n,e){var r=x(n);for(var t in e)r[t]=i.und(n[t])?e[t]:n[t];return r}function O(n){return i.rgb(n)?(r=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+r[1]+",1)":e:i.hex(n)?(t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,r,t){return e+e+r+r+t+t}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,r,t,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,u=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==u)e=r=t=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),r=s(l,f,o),t=s(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+c+")"}(n):void 0;var e,r,t,a}function C(n){var e=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[2]}function B(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(M([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+r;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return t.CSS[e+r]=s,s}function T(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return i.dom(n)&&!i.inp(n)&&(P(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(r,e)?"transform":i.dom(n)&&"transform"!==e&&T(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return r&&(r.transforms.list.set(e,i),r.transforms.last=e),t?I(n,i,t):i}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return T(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e?t+e:t}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a<r.numberOfItems;a++){var o=r.getItem(a);a>0&&(t+=j(e,o)),e=o}return t}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return j({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+j(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function $(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),u=a.width,c=a.height,s=r.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:t,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=$(n.el,n.svg),a=r(),o=r(-1),u=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var r=/-?\d*\.?\d+/g,t=L(i.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:i.str(n)||e?t.split(r):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var r=x(e);if(/^spring/.test(r.easing)&&(r.duration=s(r.easing)),i.arr(n)){var t=n.length;2===t&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(r.duration=e.duration/t)}var a=i.arr(n)?n:[n];return a.map(function(n,r){var t=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(t.delay)&&(t.delay=r?0:e.delay),i.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return k(n,r)})}function z(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)i.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a<e.length;a++)t(a);return r}(t),e)),e)i.key(a)&&r.push({name:a,tweens:V(e[a],n)});return r}function H(n,e){var r;return n.tweens.map(function(t){var a=function(n,e){var r={};for(var t in n){var a=B(n[t],e);i.arr(a)&&1===(a=a.map(function(n){return B(n,e)})).length&&(a=a[0]),r[t]=a}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(t,e),o=a.value,u=i.arr(o)?o[1]:o,c=C(u),s=N(e.target,n.name,c,e),f=r?r.to.original:s,l=i.arr(o)?o[0]:f,d=C(l)||C(s),p=c||d;return i.und(u)&&(u=f),a.from=Y(l,p),a.to=Y(A(u,l),p),a.start=r?r.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(o),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),r=a,a})}var G={css:function(n,e,r){return n.style[e]=r},attribute:function(n,e,r){return n.setAttribute(e,r)},object:function(n,e,r){return n[e]=r},transform:function(n,e,r,t,a){if(t.list.set(e,r),e===t.last||a){var o="";t.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function R(n,e){Q(n).forEach(function(n){for(var r in e){var t=B(e[r],n),a=n.target,o=C(t),u=N(a,r,o,n),i=A(L(t,o||C(u)),u),c=D(a,r);G[c](a,r,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var r=D(n.target,e.name);if(r){var t=H(e,n),a=t[t.length-1];return{type:r,property:e.name,animatable:n,tweens:t,duration:a.end,delay:t[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var r=n.length,t=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=r?Math.max.apply(Math,n.map(function(n){return t(n)+n.duration})):e.duration,a.delay=r?Math.min.apply(Math,n.map(function(n){return t(n)+n.delay})):e.delay,a.endDelay=r?a.duration-Math.max.apply(Math,n.map(function(n){return t(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var r=_.length;if(r){for(var t=0;t<r;){var a=_[t];if(a.paused){var o=_.indexOf(a);o>-1&&(_.splice(o,1),r=_.length)}else a.tick(e);t++}n()}else U=cancelAnimationFrame(U)}return n}();function rn(r){void 0===r&&(r={});var t,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=r),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,t.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/rn.speed)}function B(n,e){e&&e.seek(n-e.timelineOffset)}function P(n){for(var e=0,r=M.animations,t=r.length;e<t;){var o=r[e],u=o.animatable,i=o.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],B=h[O];isNaN(B)||(g+=C?B+C:B+" ")}}else g=h[0];G[o.type](u.target,o.property,g,u.transforms),o.currentValue=g,e++}}function I(n){M[n]&&!M.passThrough&&M[n](M)}function T(n){var e=M.duration,r=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,t&&function(n){if(M.reversePlayback)for(var e=c;e--;)B(n,t[e]);else for(var r=0;r<c;r++)B(n,t[r])}(d),!M.began&&M.currentTime>0&&(M.began=!0,I("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,I("loopBegin")),d<=r&&0!==M.currentTime&&P(0),(d>=l&&M.currentTime!==e||!e)&&P(e),d>r&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,I("changeBegin")),I("change"),P(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,I("changeComplete")),M.currentTime=a(d,0,e),M.began&&I("update"),n>=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,I("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,I("loopComplete"),I("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,t=M.children;for(var e=c=t.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,P(M.reversed?M.duration:0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),T((i+(u-o))*rn.speed)},M.seek=function(n){T(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var r=e.length;r--;)M(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),_=[]):nn.forEach(function(n){return n.play()})}),rn.version="3.0.1",rn.speed=1,rn.running=_,rn.remove=function(n){for(var e=Z(n),r=_.length;r--;){var t=_[r],a=t.animations,o=t.children;tn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;tn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||t.pause()}},rn.get=N,rn.set=R,rn.convertPx=I,rn.path=function(n,e){var r=i.str(n)?g(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:$(r),totalLength:q(r)*(t/100)}}},rn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},rn.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:u%a[0],M=s?(a[1]-1)/2:Math.floor(u/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===o&&(k=-x),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(u-v));y=Math.max.apply(Math,m)}t&&(m=m.map(function(n){return t(n/y)*y})),"reverse"===r&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},rn.timeline=function(n){void 0===n&&(n={});var r=rn(n);return r.duration=0,r.add=function(t,a){var o=_.indexOf(r),u=r.children;function c(n){n.passThrough=!0}o>-1&&_.splice(o,1);for(var s=0;s<u.length;s++)c(u[s]);var f=k(t,w(e,n));f.targets=f.targets||n.targets;var l=r.duration;f.autoplay=!1,f.direction=r.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(r),r.seek(f.timelineOffset);var d=rn(f);c(d),u.push(d);var p=J(u,n);return r.delay=p.delay,r.endDelay=p.endDelay,r.duration=p.duration,r.seek(0),r.reset(),r.autoplay&&r.play(),r},r},rn.easing=v,rn.penner=h,rn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},rn});
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index cb5f45cf..30017504 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1006,6 +1006,9 @@ function anime(params = {}) {
     if (!instance.began && instance.currentTime > 0) {
       instance.began = true;
       setCallback('begin');
+    }
+    if (!instance.loopBegan && instance.currentTime > 0) {
+      instance.loopBegan = true;
       setCallback('loopBegin');
     }
     if (insTime <= insDelay && instance.currentTime !== 0) {
@@ -1034,12 +1037,7 @@ function anime(params = {}) {
     if (engineTime >= insDuration) {
       lastTime = 0;
       countIteration();
-      if (instance.remaining) {
-        startTime = now;
-        setCallback('loopComplete');
-        setCallback('loopBegin');
-        if (instance.direction === 'alternate') { toggleInstanceDirection(); }
-      } else {
+      if (!instance.remaining) {
         instance.paused = true;
         if (!instance.completed) {
           instance.completed = true;
@@ -1050,6 +1048,13 @@ function anime(params = {}) {
             promise = makePromise(instance);
           }
         }
+      } else {
+        startTime = now;
+        setCallback('loopComplete');
+        instance.loopBegan = false;
+        if (instance.direction === 'alternate') {
+          toggleInstanceDirection();
+        }
       }
     }
   }
@@ -1061,6 +1066,7 @@ function anime(params = {}) {
     instance.progress = 0;
     instance.paused = true;
     instance.began = false;
+    instance.loopBegan = false;
     instance.changeBegan = false;
     instance.completed = false;
     instance.changeCompleted = false;

From 1730d5de1c9f8d862cede2e2570392ce96a7af11 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 10:43:28 +0200
Subject: [PATCH 22/34] Better number parsing

---
 .../examples/anime-complex-properties.html    | 57 ++++++++++++-------
 lib/anime.es.js                               |  8 ++-
 lib/anime.js                                  |  8 ++-
 lib/anime.min.js                              |  2 +-
 src/index.js                                  |  8 ++-
 5 files changed, 51 insertions(+), 32 deletions(-)

diff --git a/documentation/examples/anime-complex-properties.html b/documentation/examples/anime-complex-properties.html
index 3467b289..23484bfc 100644
--- a/documentation/examples/anime-complex-properties.html
+++ b/documentation/examples/anime-complex-properties.html
@@ -45,6 +45,11 @@
       background-image: radial-gradient(50% 100%, #FFF7A0 50%, #FF7A6D 100%);
       background-size: auto 100px;
     }
+    .exponent-values {
+      width: 300px;
+      background-color: transparent;
+      text-align: center;
+    }
   </style>
 </head>
 <body>
@@ -67,6 +72,7 @@
   <input class="item" type="range" value="0" min="0" max="100">
   <div class="basic-css color-lavender item"></div>
   <div class="auto-property color-purple item"></div>
+  <input class="exponent-values color-pink item" value="-1.1234567890123456789e+30px"></input>
   <script type="module">
     
     import anime from "../../src/index.js";
@@ -91,7 +97,7 @@
     });
     var specifiedUnit = anime({
       targets: '.specified-unit',
-      borderRadius: ['0px', '50px'],
+      borderRadius: ['16px', '1em'],
       loop: true,
       direction: 'alternate',
       easing: 'linear'
@@ -99,74 +105,81 @@
     var filter = anime({
       targets: '.filter',
       filter: ["blur(20px)", "blur(0px)"],
-      loop: true,
-      direction: 'alternate',
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
     var rgba = anime({
       targets: '.rgba',
       backgroundColor: ['rgba(255,100,50,1)', 'rgba(255,100,50,.0)'],
-      loop: true,
-      direction: 'alternate',
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
     var calc = anime({
       targets: '.calc',
       height: ['calc(25% - 100px)', 'calc(25% - 0px)'],
-      loop: true,
-      direction: 'alternate',
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
     var zeroValue = anime({
       targets: '.zero-value',
       scale: 0,
-      loop: true,
-      direction: 'alternate',
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
     var roundValue = anime({
       targets: '.round-value',
       translateY: 100,
-      loop: true,
-      round: 1,
-      direction: 'alternate',
+      round: .1,
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
     var clipPath = anime({
       targets: '.clip-path',
       clipPath: ['circle(0px at center)', 'circle(100px at center)'],
-      loop: true,
-      direction: 'alternate',
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
     var svgTransform = anime({
       targets: 'rect',
       transform: 'translate(10 10) scale(2)',
-      loop: true,
-      direction: 'alternate',
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
     var rangeValue = anime({
       targets: 'input',
       value: 100,
-      loop: true,
-      direction: 'alternate',
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
     var basicCSS = anime({
       targets: '.basic-css',
       width: 50,
       height: 50,
-      loop: true,
-      direction: 'alternate',
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
     var autoProperty = anime({
       targets: '.auto-property',
       backgroundSize: ['auto 10px', 'auto 400px'],
       margin: '20% 40px 10px 30px',
-      loop: true,
-      direction: 'alternate',
+      // loop: true,
+      // direction: 'alternate',
+      easing: 'linear'
+    });
+    var exponentValues = anime({
+      targets: '.exponent-values',
+      value: '+1.0123456789012346e+21px',
+      // loop: true,
+      // direction: 'alternate',
       easing: 'linear'
     });
   </script>
diff --git a/lib/anime.es.js b/lib/anime.es.js
index c18ef272..6536c994 100644
--- a/lib/anime.es.js
+++ b/lib/anime.es.js
@@ -393,8 +393,8 @@ function colorToRgb(val) {
 // Units
 
 function getUnit(val) {
-  var 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]; }
+  var split = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val);
+  if (split) { return split[1]; }
 }
 
 function getTransformUnit(propName) {
@@ -617,7 +617,9 @@ function getPathProgress(path, progress) {
 // Decompose value
 
 function decomposeValue(val, unit) {
-  var rgx = /-?\d*\.?\d+/g;
+  // const rgx = /-?\d*\.?\d+/g; // handles basic numbers
+  // const rgx = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
+  var rgx = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
   var value = validateValue((is.pth(val) ? val.totalLength : val), unit) + '';
   return {
     original: value,
diff --git a/lib/anime.js b/lib/anime.js
index 0d868a31..678266db 100644
--- a/lib/anime.js
+++ b/lib/anime.js
@@ -395,8 +395,8 @@ function colorToRgb(val) {
 // Units
 
 function getUnit(val) {
-  var 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]; }
+  var split = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val);
+  if (split) { return split[1]; }
 }
 
 function getTransformUnit(propName) {
@@ -619,7 +619,9 @@ function getPathProgress(path, progress) {
 // Decompose value
 
 function decomposeValue(val, unit) {
-  var rgx = /-?\d*\.?\d+/g;
+  // const rgx = /-?\d*\.?\d+/g; // handles basic numbers
+  // const rgx = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
+  var rgx = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
   var value = validateValue((is.pth(val) ? val.totalLength : val), unit) + '';
   return {
     original: value,
diff --git a/lib/anime.min.js b/lib/anime.min.js
index cc4620db..469d1097 100644
--- a/lib/anime.min.js
+++ b/lib/anime.min.js
@@ -5,4 +5,4 @@
  * animejs.com
  */
 
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},r=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],t={CSS:{},springs:{}};function a(n,e,r){return Math.min(Math.max(n,e),r)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var r=c(n),o=a(i.und(r[0])?1:r[0],.1,100),u=a(i.und(r[1])?100:r[1],.1,100),s=a(i.und(r[2])?10:r[2],.1,100),f=a(i.und(r[3])?0:r[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(h*Math.cos(p*r)+v*Math.sin(p*r)):(h+v*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function u(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,i){if(0<=r&&r<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(r!==t||a!==i)for(var s=0;s<n;++s)c[s]=o(s*e,r,a);return function(n){return r===t&&a===i?n:0===n||1===n?n:o(f(n),t,i)}}function f(t){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=t;++s)i+=e;var l=i+(t-c[--s])/(c[s+1]-c[s])*e,d=u(l,r,a);return d>=.001?function(n,e,r,t){for(var a=0;a<4;++a){var i=u(e,r,t);if(0===i)return e;e-=(o(e,r,t)-n)/i}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var u,i,c=0;(u=o(i=e+(r-e)/2,t,a)-n)>0?r=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(t,i,i+e,r,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,r=4;n<((e=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,r){return function(t){return 1-e(n,r)(1-t)}},l["easeInOut"+n]=function(n,r){return function(t){return t<.5?e(n,r)(2*t)/2:1-e(n,r)(-2*t+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var r=n.split("(")[0],t=h[r],a=c(n);switch(r){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(t,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<r;o++)if(o in n){var u=n[o];e.call(t,u,o,n)&&a.push(u)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var r in n)e[r]=n[r];return e}function w(n,e){var r=x(n);for(var t in n)r[t]=e.hasOwnProperty(t)?e[t]:n[t];return r}function k(n,e){var r=x(n);for(var t in e)r[t]=i.und(n[t])?e[t]:n[t];return r}function O(n){return i.rgb(n)?(r=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+r[1]+",1)":e:i.hex(n)?(t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,r,t){return e+e+r+r+t+t}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,r,t,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,u=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==u)e=r=t=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),r=s(l,f,o),t=s(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+c+")"}(n):void 0;var e,r,t,a}function C(n){var e=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[2]}function B(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(M([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+r;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return t.CSS[e+r]=s,s}function T(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return i.dom(n)&&!i.inp(n)&&(P(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(r,e)?"transform":i.dom(n)&&"transform"!==e&&T(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return r&&(r.transforms.list.set(e,i),r.transforms.last=e),t?I(n,i,t):i}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return T(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e?t+e:t}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a<r.numberOfItems;a++){var o=r.getItem(a);a>0&&(t+=j(e,o)),e=o}return t}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return j({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+j(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function $(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),u=a.width,c=a.height,s=r.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:t,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=$(n.el,n.svg),a=r(),o=r(-1),u=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var r=/-?\d*\.?\d+/g,t=L(i.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:i.str(n)||e?t.split(r):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var r=x(e);if(/^spring/.test(r.easing)&&(r.duration=s(r.easing)),i.arr(n)){var t=n.length;2===t&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(r.duration=e.duration/t)}var a=i.arr(n)?n:[n];return a.map(function(n,r){var t=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(t.delay)&&(t.delay=r?0:e.delay),i.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return k(n,r)})}function z(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)i.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a<e.length;a++)t(a);return r}(t),e)),e)i.key(a)&&r.push({name:a,tweens:V(e[a],n)});return r}function H(n,e){var r;return n.tweens.map(function(t){var a=function(n,e){var r={};for(var t in n){var a=B(n[t],e);i.arr(a)&&1===(a=a.map(function(n){return B(n,e)})).length&&(a=a[0]),r[t]=a}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(t,e),o=a.value,u=i.arr(o)?o[1]:o,c=C(u),s=N(e.target,n.name,c,e),f=r?r.to.original:s,l=i.arr(o)?o[0]:f,d=C(l)||C(s),p=c||d;return i.und(u)&&(u=f),a.from=Y(l,p),a.to=Y(A(u,l),p),a.start=r?r.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(o),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),r=a,a})}var G={css:function(n,e,r){return n.style[e]=r},attribute:function(n,e,r){return n.setAttribute(e,r)},object:function(n,e,r){return n[e]=r},transform:function(n,e,r,t,a){if(t.list.set(e,r),e===t.last||a){var o="";t.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function R(n,e){Q(n).forEach(function(n){for(var r in e){var t=B(e[r],n),a=n.target,o=C(t),u=N(a,r,o,n),i=A(L(t,o||C(u)),u),c=D(a,r);G[c](a,r,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var r=D(n.target,e.name);if(r){var t=H(e,n),a=t[t.length-1];return{type:r,property:e.name,animatable:n,tweens:t,duration:a.end,delay:t[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var r=n.length,t=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=r?Math.max.apply(Math,n.map(function(n){return t(n)+n.duration})):e.duration,a.delay=r?Math.min.apply(Math,n.map(function(n){return t(n)+n.delay})):e.delay,a.endDelay=r?a.duration-Math.max.apply(Math,n.map(function(n){return t(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var r=_.length;if(r){for(var t=0;t<r;){var a=_[t];if(a.paused){var o=_.indexOf(a);o>-1&&(_.splice(o,1),r=_.length)}else a.tick(e);t++}n()}else U=cancelAnimationFrame(U)}return n}();function rn(r){void 0===r&&(r={});var t,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=r),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,t.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/rn.speed)}function B(n,e){e&&e.seek(n-e.timelineOffset)}function P(n){for(var e=0,r=M.animations,t=r.length;e<t;){var o=r[e],u=o.animatable,i=o.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],B=h[O];isNaN(B)||(g+=C?B+C:B+" ")}}else g=h[0];G[o.type](u.target,o.property,g,u.transforms),o.currentValue=g,e++}}function I(n){M[n]&&!M.passThrough&&M[n](M)}function T(n){var e=M.duration,r=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,t&&function(n){if(M.reversePlayback)for(var e=c;e--;)B(n,t[e]);else for(var r=0;r<c;r++)B(n,t[r])}(d),!M.began&&M.currentTime>0&&(M.began=!0,I("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,I("loopBegin")),d<=r&&0!==M.currentTime&&P(0),(d>=l&&M.currentTime!==e||!e)&&P(e),d>r&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,I("changeBegin")),I("change"),P(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,I("changeComplete")),M.currentTime=a(d,0,e),M.began&&I("update"),n>=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,I("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,I("loopComplete"),I("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,t=M.children;for(var e=c=t.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,P(M.reversed?M.duration:0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),T((i+(u-o))*rn.speed)},M.seek=function(n){T(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var r=e.length;r--;)M(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),_=[]):nn.forEach(function(n){return n.play()})}),rn.version="3.0.1",rn.speed=1,rn.running=_,rn.remove=function(n){for(var e=Z(n),r=_.length;r--;){var t=_[r],a=t.animations,o=t.children;tn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;tn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||t.pause()}},rn.get=N,rn.set=R,rn.convertPx=I,rn.path=function(n,e){var r=i.str(n)?g(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:$(r),totalLength:q(r)*(t/100)}}},rn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},rn.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:u%a[0],M=s?(a[1]-1)/2:Math.floor(u/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===o&&(k=-x),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(u-v));y=Math.max.apply(Math,m)}t&&(m=m.map(function(n){return t(n/y)*y})),"reverse"===r&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},rn.timeline=function(n){void 0===n&&(n={});var r=rn(n);return r.duration=0,r.add=function(t,a){var o=_.indexOf(r),u=r.children;function c(n){n.passThrough=!0}o>-1&&_.splice(o,1);for(var s=0;s<u.length;s++)c(u[s]);var f=k(t,w(e,n));f.targets=f.targets||n.targets;var l=r.duration;f.autoplay=!1,f.direction=r.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(r),r.seek(f.timelineOffset);var d=rn(f);c(d),u.push(d);var p=J(u,n);return r.delay=p.delay,r.endDelay=p.endDelay,r.duration=p.duration,r.seek(0),r.reset(),r.autoplay&&r.play(),r},r},rn.easing=v,rn.penner=h,rn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},rn});
\ No newline at end of file
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},r=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],t={CSS:{},springs:{}};function a(n,e,r){return Math.min(Math.max(n,e),r)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var r=c(n),o=a(i.und(r[0])?1:r[0],.1,100),u=a(i.und(r[1])?100:r[1],.1,100),s=a(i.und(r[2])?10:r[2],.1,100),f=a(i.und(r[3])?0:r[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(h*Math.cos(p*r)+v*Math.sin(p*r)):(h+v*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function u(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,i){if(0<=r&&r<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(r!==t||a!==i)for(var s=0;s<n;++s)c[s]=o(s*e,r,a);return function(n){return r===t&&a===i?n:0===n||1===n?n:o(f(n),t,i)}}function f(t){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=t;++s)i+=e;var l=i+(t-c[--s])/(c[s+1]-c[s])*e,d=u(l,r,a);return d>=.001?function(n,e,r,t){for(var a=0;a<4;++a){var i=u(e,r,t);if(0===i)return e;e-=(o(e,r,t)-n)/i}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var u,i,c=0;(u=o(i=e+(r-e)/2,t,a)-n)>0?r=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(t,i,i+e,r,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,r=4;n<((e=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,r){return function(t){return 1-e(n,r)(1-t)}},l["easeInOut"+n]=function(n,r){return function(t){return t<.5?e(n,r)(2*t)/2:1-e(n,r)(-2*t+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var r=n.split("(")[0],t=h[r],a=c(n);switch(r){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(t,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<r;o++)if(o in n){var u=n[o];e.call(t,u,o,n)&&a.push(u)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var r in n)e[r]=n[r];return e}function w(n,e){var r=x(n);for(var t in n)r[t]=e.hasOwnProperty(t)?e[t]:n[t];return r}function k(n,e){var r=x(n);for(var t in e)r[t]=i.und(n[t])?e[t]:n[t];return r}function O(n){return i.rgb(n)?(r=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+r[1]+",1)":e:i.hex(n)?(t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,r,t){return e+e+r+r+t+t}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,r,t,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,u=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==u)e=r=t=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),r=s(l,f,o),t=s(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+c+")"}(n):void 0;var e,r,t,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function B(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(M([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+r;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return t.CSS[e+r]=s,s}function T(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return i.dom(n)&&!i.inp(n)&&(P(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(r,e)?"transform":i.dom(n)&&"transform"!==e&&T(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return r&&(r.transforms.list.set(e,i),r.transforms.last=e),t?I(n,i,t):i}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return T(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e?t+e:t}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a<r.numberOfItems;a++){var o=r.getItem(a);a>0&&(t+=j(e,o)),e=o}return t}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return j({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+j(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function $(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),u=a.width,c=a.height,s=r.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:t,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=$(n.el,n.svg),a=r(),o=r(-1),u=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var r=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,t=L(i.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:i.str(n)||e?t.split(r):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var r=x(e);if(/^spring/.test(r.easing)&&(r.duration=s(r.easing)),i.arr(n)){var t=n.length;2===t&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(r.duration=e.duration/t)}var a=i.arr(n)?n:[n];return a.map(function(n,r){var t=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(t.delay)&&(t.delay=r?0:e.delay),i.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return k(n,r)})}function z(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)i.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a<e.length;a++)t(a);return r}(t),e)),e)i.key(a)&&r.push({name:a,tweens:V(e[a],n)});return r}function H(n,e){var r;return n.tweens.map(function(t){var a=function(n,e){var r={};for(var t in n){var a=B(n[t],e);i.arr(a)&&1===(a=a.map(function(n){return B(n,e)})).length&&(a=a[0]),r[t]=a}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(t,e),o=a.value,u=i.arr(o)?o[1]:o,c=C(u),s=N(e.target,n.name,c,e),f=r?r.to.original:s,l=i.arr(o)?o[0]:f,d=C(l)||C(s),p=c||d;return i.und(u)&&(u=f),a.from=Y(l,p),a.to=Y(A(u,l),p),a.start=r?r.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(o),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),r=a,a})}var G={css:function(n,e,r){return n.style[e]=r},attribute:function(n,e,r){return n.setAttribute(e,r)},object:function(n,e,r){return n[e]=r},transform:function(n,e,r,t,a){if(t.list.set(e,r),e===t.last||a){var o="";t.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function R(n,e){Q(n).forEach(function(n){for(var r in e){var t=B(e[r],n),a=n.target,o=C(t),u=N(a,r,o,n),i=A(L(t,o||C(u)),u),c=D(a,r);G[c](a,r,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var r=D(n.target,e.name);if(r){var t=H(e,n),a=t[t.length-1];return{type:r,property:e.name,animatable:n,tweens:t,duration:a.end,delay:t[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var r=n.length,t=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=r?Math.max.apply(Math,n.map(function(n){return t(n)+n.duration})):e.duration,a.delay=r?Math.min.apply(Math,n.map(function(n){return t(n)+n.delay})):e.delay,a.endDelay=r?a.duration-Math.max.apply(Math,n.map(function(n){return t(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var r=_.length;if(r){for(var t=0;t<r;){var a=_[t];if(a.paused){var o=_.indexOf(a);o>-1&&(_.splice(o,1),r=_.length)}else a.tick(e);t++}n()}else U=cancelAnimationFrame(U)}return n}();function rn(r){void 0===r&&(r={});var t,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=r),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,t.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/rn.speed)}function B(n,e){e&&e.seek(n-e.timelineOffset)}function P(n){for(var e=0,r=M.animations,t=r.length;e<t;){var o=r[e],u=o.animatable,i=o.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],B=h[O];isNaN(B)||(g+=C?B+C:B+" ")}}else g=h[0];G[o.type](u.target,o.property,g,u.transforms),o.currentValue=g,e++}}function I(n){M[n]&&!M.passThrough&&M[n](M)}function T(n){var e=M.duration,r=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,t&&function(n){if(M.reversePlayback)for(var e=c;e--;)B(n,t[e]);else for(var r=0;r<c;r++)B(n,t[r])}(d),!M.began&&M.currentTime>0&&(M.began=!0,I("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,I("loopBegin")),d<=r&&0!==M.currentTime&&P(0),(d>=l&&M.currentTime!==e||!e)&&P(e),d>r&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,I("changeBegin")),I("change"),P(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,I("changeComplete")),M.currentTime=a(d,0,e),M.began&&I("update"),n>=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,I("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,I("loopComplete"),I("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,t=M.children;for(var e=c=t.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,P(M.reversed?M.duration:0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),T((i+(u-o))*rn.speed)},M.seek=function(n){T(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var r=e.length;r--;)M(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),_=[]):nn.forEach(function(n){return n.play()})}),rn.version="3.0.1",rn.speed=1,rn.running=_,rn.remove=function(n){for(var e=Z(n),r=_.length;r--;){var t=_[r],a=t.animations,o=t.children;tn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;tn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||t.pause()}},rn.get=N,rn.set=R,rn.convertPx=I,rn.path=function(n,e){var r=i.str(n)?g(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:$(r),totalLength:q(r)*(t/100)}}},rn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},rn.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:u%a[0],M=s?(a[1]-1)/2:Math.floor(u/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===o&&(k=-x),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(u-v));y=Math.max.apply(Math,m)}t&&(m=m.map(function(n){return t(n/y)*y})),"reverse"===r&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},rn.timeline=function(n){void 0===n&&(n={});var r=rn(n);return r.duration=0,r.add=function(t,a){var o=_.indexOf(r),u=r.children;function c(n){n.passThrough=!0}o>-1&&_.splice(o,1);for(var s=0;s<u.length;s++)c(u[s]);var f=k(t,w(e,n));f.targets=f.targets||n.targets;var l=r.duration;f.autoplay=!1,f.direction=r.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(r),r.seek(f.timelineOffset);var d=rn(f);c(d),u.push(d);var p=J(u,n);return r.delay=p.delay,r.endDelay=p.endDelay,r.duration=p.duration,r.seek(0),r.reset(),r.autoplay&&r.play(),r},r},rn.easing=v,rn.penner=h,rn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},rn});
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 0d28894e..172045b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -381,8 +381,8 @@ function colorToRgb(val) {
 // Units
 
 function getUnit(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];
+  const split = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val);
+  if (split) return split[1];
 }
 
 function getTransformUnit(propName) {
@@ -603,7 +603,9 @@ function getPathProgress(path, progress) {
 // Decompose value
 
 function decomposeValue(val, unit) {
-  const rgx = /[-+]?\d*\.?\d+([eE][-+]?\d+)?/g;
+  // const rgx = /-?\d*\.?\d+/g; // handles basic numbers
+  // const rgx = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
+  const rgx = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
   const value = validateValue((is.pth(val) ? val.totalLength : val), unit) + '';
   return {
     original: value,

From 33755f5c8fde3c64ca7200442ef0e9bfe993abb6 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 10:46:55 +0200
Subject: [PATCH 23/34] Uodpate complex properties example

---
 documentation/examples/anime-complex-properties.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/documentation/examples/anime-complex-properties.html b/documentation/examples/anime-complex-properties.html
index 23484bfc..3ce5e49e 100644
--- a/documentation/examples/anime-complex-properties.html
+++ b/documentation/examples/anime-complex-properties.html
@@ -90,14 +90,14 @@
     });
     var unitLess = anime({
       targets: '.unit-less',
-      borderRadius: 10,
+      borderRadius: 16,
       loop: true,
       direction: 'alternate',
       easing: 'linear'
     });
     var specifiedUnit = anime({
       targets: '.specified-unit',
-      borderRadius: ['16px', '1em'],
+      borderRadius: '1em',
       loop: true,
       direction: 'alternate',
       easing: 'linear'

From f7dd758b760364961b91248846dc2cccc6a0085f Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 10:52:01 +0200
Subject: [PATCH 24/34] Update complex properties examples

---
 .../examples/anime-complex-properties.html    | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/documentation/examples/anime-complex-properties.html b/documentation/examples/anime-complex-properties.html
index 3ce5e49e..ace93b8e 100644
--- a/documentation/examples/anime-complex-properties.html
+++ b/documentation/examples/anime-complex-properties.html
@@ -105,81 +105,81 @@
     var filter = anime({
       targets: '.filter',
       filter: ["blur(20px)", "blur(0px)"],
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var rgba = anime({
       targets: '.rgba',
       backgroundColor: ['rgba(255,100,50,1)', 'rgba(255,100,50,.0)'],
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var calc = anime({
       targets: '.calc',
       height: ['calc(25% - 100px)', 'calc(25% - 0px)'],
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var zeroValue = anime({
       targets: '.zero-value',
       scale: 0,
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var roundValue = anime({
       targets: '.round-value',
       translateY: 100,
       round: .1,
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var clipPath = anime({
       targets: '.clip-path',
       clipPath: ['circle(0px at center)', 'circle(100px at center)'],
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var svgTransform = anime({
       targets: 'rect',
       transform: 'translate(10 10) scale(2)',
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var rangeValue = anime({
-      targets: 'input',
+      targets: 'input[type="range"]',
       value: 100,
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var basicCSS = anime({
       targets: '.basic-css',
       width: 50,
       height: 50,
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var autoProperty = anime({
       targets: '.auto-property',
       backgroundSize: ['auto 10px', 'auto 400px'],
       margin: '20% 40px 10px 30px',
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
     var exponentValues = anime({
       targets: '.exponent-values',
       value: '+1.0123456789012346e+21px',
-      // loop: true,
-      // direction: 'alternate',
+      loop: true,
+      direction: 'alternate',
       easing: 'linear'
     });
   </script>

From 8e884cd7adacebe66d185a64fb424ea1cc0628f9 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 10:57:52 +0200
Subject: [PATCH 25/34] Update anime-callbacks.html

---
 documentation/examples/anime-callbacks.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/documentation/examples/anime-callbacks.html b/documentation/examples/anime-callbacks.html
index 48ea5e5a..afc75988 100644
--- a/documentation/examples/anime-callbacks.html
+++ b/documentation/examples/anime-callbacks.html
@@ -26,7 +26,7 @@
       position: absolute;
       width: 100%;
       height: 100vh;
-      padding-bottom: 50vh;
+      padding-bottom: 128px;
     }
 
     .el {
@@ -93,7 +93,7 @@
     .timeline {
       position: fixed;
       bottom: 0;
-      height: 50vh;
+      height: 128px;
       padding-top: 4px;
       background-color: #000;
     }

From b48016b96c7e18b55a4d1d64b7fc08649feea3ef Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 11:19:30 +0200
Subject: [PATCH 26/34] Update examples

---
 documentation/examples/advanced-staggering-2.html      | 5 +++--
 documentation/examples/advanced-staggering.html        | 5 +++--
 documentation/examples/anime-DOM-stress-test.html      | 5 +++--
 documentation/examples/anime-callbacks.html            | 5 +++--
 documentation/examples/anime-colors-test.html          | 4 ++--
 documentation/examples/anime-complex-properties.html   | 2 +-
 documentation/examples/anime-direction-reverse.html    | 5 +++--
 documentation/examples/anime-directions-testing.html   | 4 ++--
 documentation/examples/anime-ease-visualizer.html      | 4 ++--
 documentation/examples/anime-follow-scroll.html        | 5 +++--
 documentation/examples/anime-keyframes.html            | 5 +++--
 documentation/examples/anime-mgs-logo-animation.html   | 4 ++--
 documentation/examples/anime-reverse.html              | 5 +++--
 documentation/examples/anime-speed-test.html           | 4 ++--
 documentation/examples/anime-stagger-demo.html         | 5 +++--
 documentation/examples/anime-stagger-grid-demo.html    | 5 +++--
 documentation/examples/anime-stagger-tests.html        | 5 +++--
 documentation/examples/anime-stagger.html              | 5 +++--
 documentation/examples/anime-staggered-animations.html | 4 ++--
 documentation/examples/anime-staggering-demo.html      | 5 +++--
 documentation/examples/anime-svg-lines-animations.html | 4 ++--
 documentation/examples/anime-svg-path-animation.html   | 4 ++--
 documentation/examples/anime-timeline-stresstest.html  | 5 +++--
 documentation/examples/anime-timeline.html             | 5 +++--
 documentation/examples/anime-v2-logo-animation.html    | 4 ++--
 documentation/examples/anime-v3-logo-animation.html    | 4 ++--
 documentation/examples/built-in-easings-2.html         | 4 ++--
 documentation/examples/built-in-easings.html           | 4 ++--
 documentation/examples/layered-animations.html         | 4 ++--
 documentation/examples/time-control.html               | 4 ++--
 documentation/examples/transforms-demo.html            | 4 ++--
 31 files changed, 76 insertions(+), 61 deletions(-)

diff --git a/documentation/examples/advanced-staggering-2.html b/documentation/examples/advanced-staggering-2.html
index 172c77ef..bb7ef4e1 100644
--- a/documentation/examples/advanced-staggering-2.html
+++ b/documentation/examples/advanced-staggering-2.html
@@ -13,9 +13,10 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
   <link href="../assets/css/animejs.css" rel="stylesheet">
+  <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
     :root {
diff --git a/documentation/examples/advanced-staggering.html b/documentation/examples/advanced-staggering.html
index cfa8d372..f5104847 100644
--- a/documentation/examples/advanced-staggering.html
+++ b/documentation/examples/advanced-staggering.html
@@ -13,9 +13,10 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
   <link href="../assets/css/animejs.css" rel="stylesheet">
+  <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
     :root {
diff --git a/documentation/examples/anime-DOM-stress-test.html b/documentation/examples/anime-DOM-stress-test.html
index c2f30e60..1e7d2e8b 100644
--- a/documentation/examples/anime-DOM-stress-test.html
+++ b/documentation/examples/anime-DOM-stress-test.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <!-- <script src="../assets/js/anime/anime.2.0.2.js"></script> -->
diff --git a/documentation/examples/anime-callbacks.html b/documentation/examples/anime-callbacks.html
index afc75988..0b1369c6 100644
--- a/documentation/examples/anime-callbacks.html
+++ b/documentation/examples/anime-callbacks.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/anime-colors-test.html b/documentation/examples/anime-colors-test.html
index b6c8a7ca..a216b88f 100644
--- a/documentation/examples/anime-colors-test.html
+++ b/documentation/examples/anime-colors-test.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <!-- <script src="../assets/js/anime/anime.2.0.2.js"></script> -->
diff --git a/documentation/examples/anime-complex-properties.html b/documentation/examples/anime-complex-properties.html
index ace93b8e..85821d31 100644
--- a/documentation/examples/anime-complex-properties.html
+++ b/documentation/examples/anime-complex-properties.html
@@ -13,7 +13,7 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
   <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <!-- <script src="../../lib/anime.min.js"></script> -->
diff --git a/documentation/examples/anime-direction-reverse.html b/documentation/examples/anime-direction-reverse.html
index 1ffcbacc..86722583 100644
--- a/documentation/examples/anime-direction-reverse.html
+++ b/documentation/examples/anime-direction-reverse.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <!-- <script src="../../lib/anime.min.js"></script> -->
   <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
diff --git a/documentation/examples/anime-directions-testing.html b/documentation/examples/anime-directions-testing.html
index cc53a97b..6e7bd7f2 100644
--- a/documentation/examples/anime-directions-testing.html
+++ b/documentation/examples/anime-directions-testing.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <style>
diff --git a/documentation/examples/anime-ease-visualizer.html b/documentation/examples/anime-ease-visualizer.html
index b9d17232..4637279f 100644
--- a/documentation/examples/anime-ease-visualizer.html
+++ b/documentation/examples/anime-ease-visualizer.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <style>
diff --git a/documentation/examples/anime-follow-scroll.html b/documentation/examples/anime-follow-scroll.html
index 237672ef..d5c1d6a9 100644
--- a/documentation/examples/anime-follow-scroll.html
+++ b/documentation/examples/anime-follow-scroll.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <!-- <script src="../../lib/anime.min.js"></script> -->
   <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
diff --git a/documentation/examples/anime-keyframes.html b/documentation/examples/anime-keyframes.html
index 6951c0ba..58b3186b 100644
--- a/documentation/examples/anime-keyframes.html
+++ b/documentation/examples/anime-keyframes.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/anime-mgs-logo-animation.html b/documentation/examples/anime-mgs-logo-animation.html
index 19c4277f..02741408 100644
--- a/documentation/examples/anime-mgs-logo-animation.html
+++ b/documentation/examples/anime-mgs-logo-animation.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
diff --git a/documentation/examples/anime-reverse.html b/documentation/examples/anime-reverse.html
index aa45f4ed..ec32971d 100644
--- a/documentation/examples/anime-reverse.html
+++ b/documentation/examples/anime-reverse.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/anime-speed-test.html b/documentation/examples/anime-speed-test.html
index 0b0e9740..e1abcba5 100644
--- a/documentation/examples/anime-speed-test.html
+++ b/documentation/examples/anime-speed-test.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <!-- <script src="../assets/js/anime/anime.3.0.0-alpha.js"></script> -->
diff --git a/documentation/examples/anime-stagger-demo.html b/documentation/examples/anime-stagger-demo.html
index 728c72d6..ab2a029b 100644
--- a/documentation/examples/anime-stagger-demo.html
+++ b/documentation/examples/anime-stagger-demo.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/anime-stagger-grid-demo.html b/documentation/examples/anime-stagger-grid-demo.html
index 0d00031b..ecabcf0d 100644
--- a/documentation/examples/anime-stagger-grid-demo.html
+++ b/documentation/examples/anime-stagger-grid-demo.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/anime-stagger-tests.html b/documentation/examples/anime-stagger-tests.html
index 6d65c033..74995eee 100644
--- a/documentation/examples/anime-stagger-tests.html
+++ b/documentation/examples/anime-stagger-tests.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/anime-stagger.html b/documentation/examples/anime-stagger.html
index a440b29f..32a010dd 100644
--- a/documentation/examples/anime-stagger.html
+++ b/documentation/examples/anime-stagger.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/anime-staggered-animations.html b/documentation/examples/anime-staggered-animations.html
index b1bb6d96..85a1d653 100644
--- a/documentation/examples/anime-staggered-animations.html
+++ b/documentation/examples/anime-staggered-animations.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
diff --git a/documentation/examples/anime-staggering-demo.html b/documentation/examples/anime-staggering-demo.html
index bec0e87a..7fd303fc 100644
--- a/documentation/examples/anime-staggering-demo.html
+++ b/documentation/examples/anime-staggering-demo.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/anime-svg-lines-animations.html b/documentation/examples/anime-svg-lines-animations.html
index b8c1ff07..7d6fbef4 100644
--- a/documentation/examples/anime-svg-lines-animations.html
+++ b/documentation/examples/anime-svg-lines-animations.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
     body {
diff --git a/documentation/examples/anime-svg-path-animation.html b/documentation/examples/anime-svg-path-animation.html
index d9ec55c7..22e27aa7 100644
--- a/documentation/examples/anime-svg-path-animation.html
+++ b/documentation/examples/anime-svg-path-animation.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <style>
diff --git a/documentation/examples/anime-timeline-stresstest.html b/documentation/examples/anime-timeline-stresstest.html
index 0e6958c2..d6dd1daf 100644
--- a/documentation/examples/anime-timeline-stresstest.html
+++ b/documentation/examples/anime-timeline-stresstest.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
diff --git a/documentation/examples/anime-timeline.html b/documentation/examples/anime-timeline.html
index 2f0bac51..fd5d4594 100644
--- a/documentation/examples/anime-timeline.html
+++ b/documentation/examples/anime-timeline.html
@@ -13,8 +13,9 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <!-- <script src="../../lib/anime.min.js"></script> -->
   <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
diff --git a/documentation/examples/anime-v2-logo-animation.html b/documentation/examples/anime-v2-logo-animation.html
index 3bf8266d..f74032b1 100644
--- a/documentation/examples/anime-v2-logo-animation.html
+++ b/documentation/examples/anime-v2-logo-animation.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
diff --git a/documentation/examples/anime-v3-logo-animation.html b/documentation/examples/anime-v3-logo-animation.html
index 841c53ad..663ce8f4 100644
--- a/documentation/examples/anime-v3-logo-animation.html
+++ b/documentation/examples/anime-v3-logo-animation.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
   <link href="documentation/assets/css/animejs.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <style>
diff --git a/documentation/examples/built-in-easings-2.html b/documentation/examples/built-in-easings-2.html
index 5b202523..1023bc8e 100644
--- a/documentation/examples/built-in-easings-2.html
+++ b/documentation/examples/built-in-easings-2.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
   <link href="../assets/css/animejs.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/built-in-easings.html b/documentation/examples/built-in-easings.html
index c2348ab4..f2d4a5c2 100644
--- a/documentation/examples/built-in-easings.html
+++ b/documentation/examples/built-in-easings.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
   <link href="../assets/css/animejs.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/layered-animations.html b/documentation/examples/layered-animations.html
index 1a041f8d..5816f738 100644
--- a/documentation/examples/layered-animations.html
+++ b/documentation/examples/layered-animations.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
   <link href="../assets/css/animejs.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/time-control.html b/documentation/examples/time-control.html
index 66b46b14..fae626cb 100644
--- a/documentation/examples/time-control.html
+++ b/documentation/examples/time-control.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
   <link href="../assets/css/animejs.css" rel="stylesheet">
   <style>
 
diff --git a/documentation/examples/transforms-demo.html b/documentation/examples/transforms-demo.html
index 0b7e78f0..73437605 100644
--- a/documentation/examples/transforms-demo.html
+++ b/documentation/examples/transforms-demo.html
@@ -13,8 +13,8 @@
   <meta name="twitter:site" content="@juliangarnier">
   <meta name="twitter:description" content="Javascript Animation Engine">
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" href="../assets/img/icons/favicon.png" >
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
   <link href="../assets/css/animejs.css" rel="stylesheet">
   <style>
 

From 2197976280bd8c1731a6bee7c2ffe63dcfeb3739 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 14:00:17 +0200
Subject: [PATCH 27/34] Update staggering demo

---
 .../examples/advanced-staggering-2.html       | 186 +++++++++---------
 1 file changed, 98 insertions(+), 88 deletions(-)

diff --git a/documentation/examples/advanced-staggering-2.html b/documentation/examples/advanced-staggering-2.html
index bb7ef4e1..02951fd9 100644
--- a/documentation/examples/advanced-staggering-2.html
+++ b/documentation/examples/advanced-staggering-2.html
@@ -20,7 +20,7 @@
   <style>
 
     :root {
-      font-size: 24px;
+      font-size: 20px;
     }
 
     body {
@@ -29,37 +29,36 @@
       justify-content: center;
       align-items: center;
       height: 100vh;
+      background-color: #000;
     }
 
     .stagger-visualizer {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
       position: relative;
+      width: 32rem;
+      height: 16rem;
+    }
+
+    .dots-wrapper {
+      position: absolute;
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
       width: 100%;
-      max-width: 912px;
-      transform: translate3d(0,0,0);
+      height: 100%;
     }
 
     .stagger-visualizer .dot {
       position: relative;
-      width: 2px;
-      height: 2px;
-      margin: 18px;
-      background-color: currentColor;
-    }
-
-    .stagger-visualizer .cursor {
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      width: 24px;
-      height: 24px;
-      margin: 7px;
-      background-color: currentColor;
+      width: calc(1rem - 8px);
+      height: calc(1rem - 8px);
+      margin: 4px;
       border-radius: 50%;
+      background-color: currentColor;
     }
 
   </style>
@@ -67,7 +66,7 @@
 <body>
 
   <div class="stagger-visualizer">
-    <div class="cursor color-red"></div>
+    <div class="dots-wrapper"></div>
   </div>
 
 </body>
@@ -75,75 +74,86 @@
 
   import anime from '../../src/index.js';
 
-  const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
-  const fragment = document.createDocumentFragment();
-  const numberOfElements = 24*11;
-
-  for (let i = 0; i < numberOfElements; i++) {
-    const dotEl = document.createElement('div');
-    dotEl.classList.add('dot');
-    fragment.appendChild(dotEl);
-  }
-
-  staggerVisualizerEl.appendChild(fragment);
-
-  let index = anime.random(0, numberOfElements);
-  let nextIndex = 0;
-
-  function animateGrid() {
-
-    nextIndex = anime.random(0, numberOfElements);
-
-    anime.set('.cursor', {
-      translateX: anime.stagger('-38px', {grid: [24, 11], from: index, axis: 'x'}),
-      translateY: anime.stagger('-38px', {grid: [24, 11], from: index, axis: 'y'})
-    });
-    anime.timeline({
-      easing: 'easeInOutQuad',
-      complete: animateGrid
-    })
-    .add({
-      targets: '.cursor',
-      keyframes: [
-        { scale: .625 }, 
-        { scale: 1.125 },
-        { scale: 1 }
-      ],
-      duration: 600
-    })
-    .add({
-      targets: '.dot',
-      keyframes: [
-        {
-          translateX: anime.stagger('-4px', {grid: [24, 11], from: index, axis: 'x'}),
-          translateY: anime.stagger('-4px', {grid: [24, 11], from: index, axis: 'y'}),
-          duration: 200
-        }, {
-          translateX: anime.stagger('4px', {grid: [24, 11], from: index, axis: 'x'}),
-          translateY: anime.stagger('4px', {grid: [24, 11], from: index, axis: 'y'}),
-          scale: anime.stagger([9, 2], {grid: [24, 11], from: index}),
-          duration: 400
-        }, {
-          translateX: 0,
-          translateY: 0,
-          scale: 1,
-          duration: 600,
-        }
-      ],
-      delay: anime.stagger(30, {grid: [24, 11], from: index})
-    }, '-=600')
-    .add({
-      targets: '.cursor',
-      translateX: { value: anime.stagger('-38px', {grid: [24, 11], from: nextIndex, axis: 'x'}), duration: anime.random(400, 1200) },
-      translateY: { value: anime.stagger('-38px', {grid: [24, 11], from: nextIndex, axis: 'y'}), duration: anime.random(400, 1200) },
-      easing: 'easeOutSine'
-    }, '-=1100')
-
-    index = nextIndex;
-
-  }
-
-  animateGrid();
+
+  var advancedStaggeringAnimation = (function() {
+
+    var staggerVisualizerEl = document.querySelector('.stagger-visualizer');
+    var dotsWrapperEl = staggerVisualizerEl.querySelector('.dots-wrapper');
+    var dotsFragment = document.createDocumentFragment();
+    var grid = [32, 16];
+    var cellSize = 1;
+    var numberOfElements = grid[0] * grid[1];
+    var animation;
+    var paused = true;
+
+    for (var i = 0; i < numberOfElements; i++) {
+      var dotEl = document.createElement('div');
+      dotEl.classList.add('dot');
+      dotsFragment.appendChild(dotEl);
+    }
+
+    dotsWrapperEl.appendChild(dotsFragment);
+
+    var index = anime.random(0, numberOfElements-1);
+    var nextIndex = 0;
+
+    function play() {
+
+      paused = false;
+      if (animation) animation.pause();
+
+      nextIndex = anime.random(0, numberOfElements-1);
+
+      var saturation = 75;
+
+      var colorStart = anime.random(0, 256);
+      var colorEnd = anime.random(0, 256);
+      var colorRangeValue = [colorStart, colorEnd];
+      var luminosityStart = anime.random(60, 80);
+      var luminosityEnd = anime.random(20, 40);
+      var luminosityRangeValue = [luminosityStart, luminosityEnd];
+
+      function staggeredGridColors(el, i, total) {
+        var hue = Math.round(anime.stagger(colorRangeValue, {grid: grid, from: index})(el, i, total));
+        var luminosity = Math.round(anime.stagger(luminosityRangeValue, {grid: grid, from: index})(el, i, total));
+        return 'hsl(' + hue + ', ' + saturation + '%, ' + luminosity + '%)';
+      }
+
+      animation = anime({
+        targets: '.stagger-visualizer .dot',
+        keyframes: [
+          {
+            zIndex: function(el, i, total) {
+              return Math.round(anime.stagger([numberOfElements, 0], {grid: grid, from: index})(el, i, total));
+            },
+            translateX: anime.stagger('-.001rem', {grid: grid, from: index, axis: 'x'}),
+            translateY: anime.stagger('-.001rem', {grid: grid, from: index, axis: 'y'}),
+            duration: 200
+          }, {
+            translateX: anime.stagger('.075rem', {grid: grid, from: index, axis: 'x'}),
+            translateY: anime.stagger('.075rem', {grid: grid, from: index, axis: 'y'}),
+            scale: anime.stagger([2, .2], {grid: grid, from: index}),
+            backgroundColor: staggeredGridColors,
+            duration: 450
+          }, {
+            translateX: 0,
+            translateY: 0,
+            scale: 1,
+            duration: 500,
+          }
+        ],
+        delay: anime.stagger(60, {grid: grid, from: index}),
+        easing: 'easeInOutQuad',
+        complete: play
+      }, 30)
+
+      index = nextIndex;
+
+    }
+
+    play();
+
+  })();
 
 </script>
 </html>

From 4a6f54d6224ad7886ed81072314b6f86c3794911 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 14:50:27 +0200
Subject: [PATCH 28/34] Update ease-visualizer

---
 .../examples/advanced-staggering.html         |   6 +-
 .../examples/anime-direction-reverse.html     |  93 ------
 .../examples/anime-directions-testing.html    |  13 +-
 .../examples/anime-ease-visualizer.html       | 269 ++++++++++++------
 4 files changed, 191 insertions(+), 190 deletions(-)
 delete mode 100644 documentation/examples/anime-direction-reverse.html

diff --git a/documentation/examples/advanced-staggering.html b/documentation/examples/advanced-staggering.html
index f5104847..957ead46 100644
--- a/documentation/examples/advanced-staggering.html
+++ b/documentation/examples/advanced-staggering.html
@@ -77,6 +77,7 @@
   const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
   const fragment = document.createDocumentFragment();
   const numberOfElements = 16*16;
+  var animation;
 
   for (let i = 0; i < numberOfElements; i++) {
     const dotEl = document.createElement('div');
@@ -91,13 +92,16 @@
 
   function animateGrid() {
 
+    if (animation) animation.pause();
+
     nextIndex = anime.random(0, numberOfElements);
 
     anime.set('.cursor', {
       translateX: anime.stagger('-1rem', {grid: [16, 16], from: index, axis: 'x'}),
       translateY: anime.stagger('-1rem', {grid: [16, 16], from: index, axis: 'y'})
     });
-    anime.timeline({
+
+    animation = anime.timeline({
       easing: 'easeInOutQuad',
       complete: animateGrid
     })
diff --git a/documentation/examples/anime-direction-reverse.html b/documentation/examples/anime-direction-reverse.html
deleted file mode 100644
index 86722583..00000000
--- a/documentation/examples/anime-direction-reverse.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Direction reverse | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
-  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
-  <link href="../assets/css/animejs.css" rel="stylesheet">
-  <link href="../assets/css/documentation.css" rel="stylesheet">
-  <!-- <script src="../../lib/anime.min.js"></script> -->
-  <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
-  <style>
-
-    .scroll-area {
-      width: 100%;
-      height: 700vh;
-    }
-
-    .animation-wrapper {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-    }
-
-    .pane {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      top: 100vh;
-      left: 0;
-      width: 100%;
-      height: 100vh;
-      background-color: #000;
-      font-size: 40vw;
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="scroll-area"></div>
-
-  <div class="animation-wrapper">
-    <div class="pane pane-01">01</div>
-    <div class="pane pane-02">02</div>
-    <div class="pane pane-03">03</div>
-    <div class="pane pane-04">04</div>
-    <div class="pane pane-05">05</div>
-    <div class="pane pane-06">06</div>
-    <div class="pane pane-07">07</div>
-    <div class="pane pane-08">08</div>
-    <div class="pane pane-09">09</div>
-    <div class="pane pane-10">10</div>
-    <div class="pane pane-11">11</div>
-    <div class="pane pane-12">12</div>
-    <div class="pane pane-13">13</div>
-    <div class="pane pane-14">14</div>
-  </div>
-
-</body>
-<script type="module">
-
-  import anime from '../../src/index.js';
-
-  var began = 0;
-  var completed = 0;
-
-  window.tl = anime({
-    targets: '.pane-01',
-    translateY: '-100vh',
-    easing: 'easeInOutSine',
-    duration: 200,
-    direction: 'reverse',
-    update: function(instance) {
-      console.log(instance);
-    }
-  })
-
-  </script>
-  <!-- <script src="../assets/js/vendors/stats.min.js"></script> -->
-</html>
diff --git a/documentation/examples/anime-directions-testing.html b/documentation/examples/anime-directions-testing.html
index 6e7bd7f2..47b56b44 100644
--- a/documentation/examples/anime-directions-testing.html
+++ b/documentation/examples/anime-directions-testing.html
@@ -15,6 +15,7 @@
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
   <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
   <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <style>
@@ -93,21 +94,21 @@
       params.delay = 1000;
       params.endDelay = 1000;
       params.easing = 'easeInOutQuad';
-      params.begin = function() { testEl.classList.add('color-03') };
+      params.begin = function() { testEl.classList.add('color-lightorange') };
       params.update = function(a) { 
-        testEl.classList.add('color-01');
+        testEl.classList.add('color-red');
         progressEl.value = 'Progress ' + Math.round(a.progress) + '%';
       };
-      params.complete = function() { testEl.classList.add('color-05') };
+      params.complete = function() { testEl.classList.add('color-darkgreen') };
       var animation = anime(params);
       animation.finished.then(function() {
         promiseEl.value = 'Promise resolved'
         console.log('Promise resolved');
       });
       testEl.onclick = function() {
-        testEl.classList.add('color-01');
-        testEl.classList.remove('color-03');
-        testEl.classList.remove('color-05');
+        testEl.classList.add('color-red');
+        testEl.classList.remove('color-lightorange');
+        testEl.classList.remove('color-darkgreen');
         animation.restart();
       }
     }
diff --git a/documentation/examples/anime-ease-visualizer.html b/documentation/examples/anime-ease-visualizer.html
index 4637279f..792c5c7d 100644
--- a/documentation/examples/anime-ease-visualizer.html
+++ b/documentation/examples/anime-ease-visualizer.html
@@ -15,6 +15,7 @@
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
   <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
   <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <style>
@@ -55,19 +56,17 @@
     }
     .visualizer-wrapper {
       position: relative;
-      width: 200px;
-      height: 200px;
+      width: 100%;
+      height: 100%;
     }
     .visualizer {
       position: relative;
-      width: 100px;
-      height: 100px;
-      transform: scale(2);
-      transform-origin: 0 0;
+      width: 100%;
     }
     .value {
+      position: relative;
       width: 20px;
-      height: 200px;
+      height: 100%;
       margin-left: 20px;
     }
     @media screen and (min-width: 980px) {
@@ -86,9 +85,6 @@
         width: 400px;
         height: 400px;
       }
-      .visualizer {
-        transform: scale(4);
-      }
       .value {
         width: 40px;
         height: 400px;
@@ -110,35 +106,55 @@
       height: 1px;
       transform-origin: 100% 0;
     }
+    .graph {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
     .cursor {
       position: absolute;
       z-index: 2;
-      top: 0;
-      left: 100%;
-      width: 10px;
-      height: 10px;
-      margin: -5px 0 0 10px;
+      width: 40px;
+      height: 40px;
+      margin-top: -20px;
       background: #FF1461;
       border-radius: 50%;
       transform: translateY(100px);
     }
-    svg {
+    .curve {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
       overflow: visible;
       position: relative;
       z-index: 1;
       width: 100%;
       height: 100%;
     }
-    path {
-      fill: none;
-      stroke: #18FF92;
+    .curve-dot {
+      position: relative;
+      width: 6px;
+      height: 6px;
+      margin-bottom: -3px;
+      margin-left: -3px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      background-color: #18FF92;
+    }
+    .curve-dot:first-child {
+      margin-left: -3px;
+    }
+    .curve-dot:last-child {
+      margin-right: -4px;
     }
     button {
       opacity: 1;
       position: relative;
       color: currentColor;
       font-size: 16px;
-      width: calc(25% + 1px);
+      width: calc(50% + 1px);
       border: 1px solid #09090B;
       background: transparent;
       margin: -1px 0 0 -1px;
@@ -177,68 +193,154 @@
         <div class="axis x"></div>
         <div class="axis y"></div>
         <div class="visualizer">
-          <div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
-            <div class="cursor"></div>
+          <div class="curve">
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
+            <div class="curve-dot"></div>
           </div>
-          <svg viewBox="0 0 100 100">
-            <path class="curve"/>
-          </svg>
         </div>
       </div>
-      <div class="value grid"></div>
+      <div class="value grid">
+        <div class="graph">
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+          <div class="cursor"></div>
+        </div>
+      </div>
     </div>
     <div class="options">
       <label>Ease In</label>
-      <button class="active" value="0.550, 0.085, 0.680, 0.530" name="easeInQuad" >Quad</button>
-      <button value="0.550, 0.055, 0.675, 0.190" name="easeInCubic" >Cubic</button>
-      <button value="0.895, 0.030, 0.685, 0.220" name="easeInQuart" >Quart</button>
-      <button value="0.755, 0.050, 0.855, 0.060" name="easeInQuint" >Quint</button>
-      <button value="0.470, 0.000, 0.745, 0.715" name="easeInSine" >Sine</button>
-      <button value="0.950, 0.050, 0.795, 0.035" name="easeInExpo" >Expo</button>
-      <button value="0.600, 0.040, 0.980, 0.335" name="easeInCirc" >Circ</button>
-      <button value="0.600, -0.280, 0.735, 0.045" name="easeInBack" >Back</button>
+      <button class="active" value="easeInQuad" >Quad</button>
+      <button value="easeInCubic" >Cubic</button>
+      <button value="easeInQuart" >Quart</button>
+      <button value="easeInQuint" >Quint</button>
+      <button value="easeInSine" >Sine</button>
+      <button value="easeInExpo" >Expo</button>
+      <button value="easeInCirc" >Circ</button>
+      <button value="easeInBack" >Back</button>
+      <button value="easeInBounce" >Bounce</button>
+      <button value="easeInElastic" >Elastic</button>
       <label>Ease Out</label>
-      <button value="0.250, 0.460, 0.450, 0.940" name="easeOutQuad" >Quad</button>
-      <button value="0.215, 0.610, 0.355, 1.000" name="easeOutCubic" >Cubic</button>
-      <button value="0.165, 0.840, 0.440, 1.000" name="easeOutQuart" >Quart</button>
-      <button value="0.230, 1.000, 0.320, 1.000" name="easeOutQuint" >Quint</button>
-      <button value="0.390, 0.575, 0.565, 1.000" name="easeOutSine" >Sine</button>
-      <button value="0.190, 1.000, 0.220, 1.000" name="easeOutExpo" >Expo</button>
-      <button value="0.075, 0.820, 0.165, 1.000" name="easeOutCirc" >Circ</button>
-      <button value="0.175, 0.885, 0.320, 1.275" name="easeOutBack" >Back</button>
+      <button value="easeOutQuad" >Quad</button>
+      <button value="easeOutCubic" >Cubic</button>
+      <button value="easeOutQuart" >Quart</button>
+      <button value="easeOutQuint" >Quint</button>
+      <button value="easeOutSine" >Sine</button>
+      <button value="easeOutExpo" >Expo</button>
+      <button value="easeOutCirc" >Circ</button>
+      <button value="easeOutBack" >Back</button>
+      <button value="easeOutBounce" >Bounce</button>
+      <button value="easeOutElastic" >Elastic</button>
       <label>Ease In Out</label>
-      <button value="0.455, 0.030, 0.515, 0.955" name="easeInOutQuad" >Quad</button>
-      <button value="0.645, 0.045, 0.355, 1.000" name="easeInOutCubic" >Cubic</button>
-      <button value="0.770, 0.000, 0.175, 1.000" name="easeInOutQuart" >Quart</button>
-      <button value="0.860, 0.000, 0.070, 1.000" name="easeInOutQuint" >Quint</button>
-      <button value="0.445, 0.050, 0.550, 0.950" name="easeInOutSine" >Sine</button>
-      <button value="1.000, 0.000, 0.000, 1.000" name="easeInOutExpo" >Expo</button>
-      <button value="0.785, 0.135, 0.150, 0.860" name="easeInOutCirc" >Circ</button>
-      <button value="0.680, -0.550, 0.265, 1.550" name="easeInOutBack" >Back</button>
+      <button value="easeInOutQuad" >Quad</button>
+      <button value="easeInOutCubic" >Cubic</button>
+      <button value="easeInOutQuart" >Quart</button>
+      <button value="easeInOutQuint" >Quint</button>
+      <button value="easeInOutSine" >Sine</button>
+      <button value="easeInOutExpo" >Expo</button>
+      <button value="easeInOutCirc" >Circ</button>
+      <button value="easeInOutBack" >Back</button>
+      <button value="easeInOutBounce" >Bounce</button>
+      <button value="easeInOutElastic" >Elastic</button>
     </div>
   </div>
   <script>
 
   var pathEl = document.querySelector('.curve');
   var presetsEls = document.querySelectorAll('.options button');
-  var ratio = window.innerWidth >= 980 ? 2 : 1;
   var duration = 1000;
 
   function animateProgress(easingName) {
@@ -254,19 +356,19 @@
     })
     .add({
       targets: '.axis.x',
-      translateX: [0, (200 * ratio)],
+      translateX: [0, 399],
       translateZ: [0, 0]
      }, 0)
     .add({
       targets: '.axis.y',
-      translateY: [0, -(200 * ratio)],
+      translateY: [0, -399],
       translateZ: [0, 0],
       easing: easingName,
       endDelay: 1000
     }, 0)
     .add({
       targets: '.cursor',
-      translateY: [100, 0],
+      translateY: [400, 0],
       translateZ: [0, 0],
       easing: easingName,
       update: function(anim) {
@@ -283,32 +385,19 @@
 
   }
 
-  function convertCoordinates(coords) {
-    var x1 = coords[0] * 100;
-    var y1 = 100 - (coords[1] * 100);
-    var x2 = coords[2] * 100;
-    var y2 = 100 - (coords[3] * 100);
-    return 'M0 100C' + x1 + ' ' + y1 + ' ' + x2 + ' ' + y2 + ' 100 0';
-  }
-
-  function getCoordinates(value) {
-    return convertCoordinates(value.split(','));
-  }
-
   function changeEase(event) {
     for (var i = 0; i < presetsEls.length; i++) {
       presetsEls[i].classList.remove('active');
     }
     var buttonEl = event.target;
-    var value = buttonEl.value;
-    var name = buttonEl.name;
+    var easingName = buttonEl.value;
     buttonEl.classList.add('active');
-    var coordinates = getCoordinates(value);
-    animateProgress(name);
-    anime.remove(pathEl);
+    animateProgress(easingName);
     anime({
-      targets: pathEl,
-      d: coordinates
+      targets: '.curve-dot',
+      translateY: anime.stagger([0, -400], {easing: easingName}),
+      easing: 'easeInOutQuad',
+      duration: 400
     });
   }
 

From ff4c7002a5f82f22141f719c9ac01201ccf0de5b Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 14:52:41 +0200
Subject: [PATCH 29/34] Update anime-mgs-logo-animation.html

---
 documentation/examples/anime-mgs-logo-animation.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/documentation/examples/anime-mgs-logo-animation.html b/documentation/examples/anime-mgs-logo-animation.html
index 02741408..793c2d6b 100644
--- a/documentation/examples/anime-mgs-logo-animation.html
+++ b/documentation/examples/anime-mgs-logo-animation.html
@@ -15,6 +15,7 @@
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
   <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
   <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
@@ -33,7 +34,7 @@
       justify-content: center;
     }
 
-    .logo { margin: auto; }
+    .mgs-logo { margin: auto; }
     .vert { transform-origin: center bottom; }
     .hori { transform-origin: 0% 50%; }
     .diag-left { transform-origin: 100% 100%; }
@@ -50,7 +51,7 @@
 </head>
 <body>
   <section>
-    <svg class="logo" width="100%" height="448" viewBox="0 0 1024 448">
+    <svg class="mgs-logo" width="100%" height="448" viewBox="0 0 1024 448">
       <g class="stripes" transform="translate(321.000000, 160.000000)" fill="#FFF">
         <path d="M8,20 L12,16 L92,16 L88,20 L8,20 L8,20 L8,20 L8,20 Z" class="stripe stripe-left"></path>
         <path d="M4,24 L0,28 L80,28 L84,24 L4,24 L4,24 L4,24 L4,24 Z" class="stripe stripe-left"></path>

From 2eec933055a8848e74b424e0cbac7ed112cc2210 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 15:11:22 +0200
Subject: [PATCH 30/34] Update staggering grid demo

---
 documentation/examples/anime-reverse.html     | 57 -----------------
 .../examples/anime-stagger-grid-demo.html     | 61 +++++++++----------
 2 files changed, 28 insertions(+), 90 deletions(-)
 delete mode 100644 documentation/examples/anime-reverse.html

diff --git a/documentation/examples/anime-reverse.html b/documentation/examples/anime-reverse.html
deleted file mode 100644
index ec32971d..00000000
--- a/documentation/examples/anime-reverse.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Anime states system | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
-  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
-  <link href="../assets/css/animejs.css" rel="stylesheet">
-  <link href="../assets/css/documentation.css" rel="stylesheet">
-  <style>
-
-    body {
-      display: flex;
-      flex-wrap: no-wrap;
-      justify-content: space-around;
-      align-items: center;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-
-    .el {
-      width: 50px;
-      height: 50px;
-      background-color: currentColor;
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="el color-04"></div>
-
-</body>
-<script type="module">
-
-  import anime from '../../src/index.js';
-
-  anime({
-    targets: '.el',
-    translateX: 400,
-    direction: 'reverse'
-  });
-
-
-</script>
-</html>
diff --git a/documentation/examples/anime-stagger-grid-demo.html b/documentation/examples/anime-stagger-grid-demo.html
index ecabcf0d..26e9d1ec 100644
--- a/documentation/examples/anime-stagger-grid-demo.html
+++ b/documentation/examples/anime-stagger-grid-demo.html
@@ -36,8 +36,8 @@
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
-      width: 20rem;
-      height: 20rem;
+      width: 17rem;
+      height: 17rem;
     }
 
     .stagger-visualizer div {
@@ -61,7 +61,10 @@
 
   const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
   const fragment = document.createDocumentFragment();
-  const numberOfElements = 400;
+  const grid = [17, 17];
+  const col = grid[0];
+  const row = grid[1];
+  const numberOfElements = col * row;
 
   for (let i = 0; i < numberOfElements; i++) {
     fragment.appendChild(document.createElement('div'));
@@ -74,59 +77,51 @@
     easing: 'easeInOutSine',
     delay: anime.stagger(50),
     loop: true,
-    direction: 'alternate',
-    autoplay: false,
-    loopComplete: (a) => console.log('end'),
-    //update: () => console.log(staggersAnimation.progress)
+    autoplay: false
   })
   .add({
     translateX: [
-      {value: anime.stagger('-.1rem', {grid: [20, 20], from: 'center', axis: 'x'}) },
-      {value: anime.stagger('.1rem', {grid: [20, 20], from: 'center', axis: 'x'}) }
+      {value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'x'}) },
+      {value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'x'}) }
     ],
     translateY: [
-      {value: anime.stagger('-.1rem', {grid: [20, 20], from: 'center', axis: 'y'}) },
-      {value: anime.stagger('.1rem', {grid: [20, 20], from: 'center', axis: 'y'}) }
+      {value: anime.stagger('-.1rem', {grid: grid, from: 'center', axis: 'y'}) },
+      {value: anime.stagger('.1rem', {grid: grid, from: 'center', axis: 'y'}) }
     ],
     duration: 1000,
     scale: .5,
-    delay: anime.stagger(100, {grid: [20, 20], from: 'center'})
+    delay: anime.stagger(100, {grid: grid, from: 'center'})
   })
   .add({
     translateX: () => anime.random(-10, 10),
     translateY: () => anime.random(-10, 10),
-    delay: anime.stagger(2, {from: 'last'})
+    delay: anime.stagger(8, {from: 'last'})
   })
   .add({
-    translateX: 0,
-    translateY: anime.stagger('.5rem', {grid: [20, 20], from: 'center', axis: 'y'}),
-    rotate: anime.stagger(10, {grid: [20, 20], from: 'first', axis: 'y'}),
-    scale: anime.stagger([0,1], {grid: [20, 20], axis: 'y'}),
-    delay: anime.stagger(2, {from: 'center'})
-  })
-  .add({
-    translateX: anime.stagger(['1rem', '-1rem'], {grid: [20, 20], from: 'center', axis: 'x'}),
-    translateY: anime.stagger(['1rem', '-1rem'], {grid: [20, 20], from: 'center', axis: 'y'}),
+    translateX: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'x'}),
+    translateY: anime.stagger('.25rem', {grid: grid, from: 'center', axis: 'y'}),
     rotate: 0,
-    delay: anime.stagger(1, {from: 'last'})
+    scaleX: 4,
+    scaleY: .25,
+    delay: anime.stagger(4, {from: 'center'})
   })
   .add({
-    scaleX: 4,
-    translateX: anime.stagger('1rem', {grid: [20, 20], from: 'center', axis: 'x'}),
-    translateY: anime.stagger('1rem', {grid: [20, 20], from: 'center', axis: 'y'}),
-    delay: anime.stagger(10, {grid: [20, 20], from: 'last'})
+    rotate: anime.stagger([90, 0], {grid: grid, from: 'center'}),
+    delay: anime.stagger(50, {grid: grid, from: 'center'})
   })
   .add({
-    scaleX: 1,
     translateX: 0,
     translateY: 0,
-    rotate: anime.stagger([-360, 0], {grid: [20, 20]}),
-    delay: anime.stagger(50, {grid: [20, 20], from: 'center'})
+    scale: .5,
+    scaleX: 1,
+    rotate: 0,
+    duration: 1000,
+    delay: anime.stagger(100, {grid: grid, from: 'center'})
   })
   .add({
-    translateX: anime.stagger('1rem', {grid: [20, 20], from: 'center', axis: 'x'}),
-    translateY: anime.stagger('1rem', {grid: [20, 20], from: 'center', axis: 'y'}),
-    delay: anime.stagger(20, {grid: [20, 20]})
+    scaleY: 1,
+    scale: 1,
+    delay: anime.stagger(20, {grid: grid, from: 'center'})
   })
 
   staggersAnimation.play();

From 5c105055f2598cea924a40d09b14671a05539c12 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 15:28:44 +0200
Subject: [PATCH 31/34] Update examples

---
 .../examples/anime-stagger-tests.html         |   8 +-
 documentation/examples/anime-stagger.html     | 428 ------------------
 .../examples/anime-staggered-easing-demo.html |  90 ++++
 .../examples/anime-staggering-demo.html       | 155 -------
 .../examples/anime-timeline-stresstest.html   | 141 ------
 .../examples/anime-v2-logo-animation.html     |   5 +-
 .../examples/anime-v3-logo-animation.html     | 158 -------
 .../examples/built-in-easings-2.html          | 135 ------
 documentation/examples/built-in-easings.html  |  48 +-
 documentation/examples/time-control.html      |   2 +-
 documentation/examples/transforms-demo.html   |  15 +-
 11 files changed, 138 insertions(+), 1047 deletions(-)
 delete mode 100644 documentation/examples/anime-stagger.html
 create mode 100644 documentation/examples/anime-staggered-easing-demo.html
 delete mode 100644 documentation/examples/anime-staggering-demo.html
 delete mode 100644 documentation/examples/anime-timeline-stresstest.html
 delete mode 100644 documentation/examples/anime-v3-logo-animation.html
 delete mode 100644 documentation/examples/built-in-easings-2.html

diff --git a/documentation/examples/anime-stagger-tests.html b/documentation/examples/anime-stagger-tests.html
index 74995eee..6549ba0b 100644
--- a/documentation/examples/anime-stagger-tests.html
+++ b/documentation/examples/anime-stagger-tests.html
@@ -391,14 +391,14 @@ <h1>Coordinates reversed</h1>
       anim.player.delayEl = createEl('div', 'tl-delay', anim.player.animationEl);
       anim.player.endDelayEl = createEl('div', 'tl-end-delay', anim.player.animationEl);
       anim.update = function() {
-        anime.setValue(anim.player.animationEl, {
+        anime.set(anim.player.animationEl, {
           left: convertMStoEM(timelineOffset) + 'em',
           width: convertMStoEM(anim.duration * 3) + 'em'
         });
-        anime.setValue(anim.player.delayEl, {width: (anim.delay / anim.duration) * 100 + '%'});
-        anime.setValue(anim.player.endDelayEl, {width: (anim.endDelay / anim.duration) * 100 + '%'});
+        anime.set(anim.player.delayEl, {width: (anim.delay / anim.duration) * 100 + '%'});
+        anime.set(anim.player.endDelayEl, {width: (anim.endDelay / anim.duration) * 100 + '%'});
       }
-      anime.setValue(anim.player.animationEl, {color: colors[colorIndex]});
+      anime.set(anim.player.animationEl, {color: colors[colorIndex]});
       colorIndex++;
       if (!colors[colorIndex]) colorIndex = 0;
       anim.update();
diff --git a/documentation/examples/anime-stagger.html b/documentation/examples/anime-stagger.html
deleted file mode 100644
index 32a010dd..00000000
--- a/documentation/examples/anime-stagger.html
+++ /dev/null
@@ -1,428 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>stager | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
-  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
-  <link href="../assets/css/animejs.css" rel="stylesheet">
-  <link href="../assets/css/documentation.css" rel="stylesheet">
-  <style>
-
-    body {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-
-    .testarea {
-      position: fixed;
-      z-index: 1;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      flex-shrink: 0;
-      width: calc( 14 * 3rem);
-      height: calc( 14 * 3rem);
-    }
-
-    .el {
-      width: 3rem;
-      height: 3rem;
-      background-color: currentColor;
-    }
-
-    /* Player animation */
-
-    .timeline {
-      position: absolute;
-      flex-shrink: 0;
-      width: 100%;
-      height: 100%;
-      padding-top: 4px;
-    }
-
-    .timeline.player-animation {
-      width: 100%;
-      left: 0;
-    }
-
-    .tl-needle {
-      position: fixed;
-      z-index: 2;
-      top: 0;
-      left: 0;
-      width: 2px;
-      height: 100%;
-      margin-left: -1px;
-      background-color: #FFF;
-    }
-
-    .tl-animation {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      width: auto;
-      height: 8px;
-      margin-bottom: 4px;
-      background-color: currentColor;
-      border-radius: .5rem;
-    }
-
-    .tl-delay,
-    .tl-end-delay {
-      width: auto;
-      height: 100%;
-      background-color: rgba(0,0,0,.5);
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="testarea">
-
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-    <div class="el color-06"></div>
-    <div class="el color-07"></div>
-    <div class="el color-08"></div>
-    <div class="el color-09"></div>
-    <div class="el color-10"></div>
-    <div class="el color-11"></div>
-    <div class="el color-01"></div>
-    <div class="el color-02"></div>
-    <div class="el color-03"></div>
-    <div class="el color-04"></div>
-    <div class="el color-05"></div>
-
-  </div>
-
-  <div class="log log-animation"></div>
-  <div class="time time-animation"></div>
-
-</body>
-<script type="module">
-
-  import anime from '../../src/index.js';
-
-  var animationTimeLogEl = document.querySelector('.time-animation');
-  var timelineTimeLogEl = document.querySelector('.time-timeline');
-
-  var stager = {
-    leftToRight: (spacing, min, max) => {
-      return (el, i, t) => {
-        let delay = i * spacing;
-        if (min) delay += min;
-        if (max) delay = i * ((max - min) / t);
-        return delay;
-      }
-    },
-    rightToLeft: spacing => {
-      return (el, i, t) => {
-        return ((t - 1) - i) * spacing;
-      }
-    },
-    centerOut: spacing => {
-      return (el, i, t) => {
-        return Math.abs(Math.round((t / 2) - i - 1)) * spacing
-      }
-    },
-    centerIn: spacing => {
-      return (el, i, t) => {
-        return (i >= t / 2 ? ((t - 1) - i) : i) * spacing
-      }
-    },
-    splash: (x, y, spacing) => {
-      return (el, i) => {
-        const rect = el.getBoundingClientRect();
-        const dx = x - (rect.left + (rect.width / 2));
-        const dy = y - (rect.top + (rect.height / 2));
-        const distance = Math.sqrt( dx * dx + dy * dy );
-        return (distance / 100) * spacing;
-      }
-    }
-  }
-
-  var animation = anime({
-    targets: '.el',
-    rotate: stager.splash(window.innerWidth / 2, window.innerHeight / 2, 90),
-    scaleX: .05,
-    delay: stager.splash(window.innerWidth / 2, window.innerHeight / 2, 100),
-    easing: 'easeInOutQuart',
-    direction: 'alternate',
-    loop: true
-  });
-
-  function animePlayer(instance, playerClass) {
-
-    function createEl(type, className, parentEl) {
-      var el = document.createElement(type);
-      if (className) el.classList.add(className);
-      if (parentEl) parentEl.appendChild(el);
-      return el;
-    }
-
-    var timelineEl = createEl('div', 'timeline', document.body);
-    if (playerClass) timelineEl.classList.add(playerClass);
-    var needleEl = createEl('div', 'tl-needle', timelineEl);
-    var animations = [];
-    var colors = ['#FF1461','#FF7C72','#FBF38C','#A6FF8F','#18FF92','#1CE2B2','#5EF3FB','#61C3FF','#5A87FF','#8453E3','#C26EFF','#FB89FB'];
-    var colorIndex = 0;
-
-    function convertMStoEM(ms) { return ms / 100; }
-    function convertEMtoMS(em) { return parseFloat(em) * 250; }
-
-    function createAnimationLog(animObj, timelineOffset) {
-      var anim = animObj;
-      anim.player = {};
-      anim.player.animationEl = createEl('div', 'tl-animation', timelineEl);
-      anim.player.delayEl = createEl('div', 'tl-delay', anim.player.animationEl);
-      anim.player.endDelayEl = createEl('div', 'tl-end-delay', anim.player.animationEl);
-      anim.update = function() {
-        anime.setValue(anim.player.animationEl, {
-          left: convertMStoEM(timelineOffset) + 'em',
-          width: convertMStoEM(anim.duration) + 'em'
-        });
-        anime.setValue(anim.player.delayEl, {width: (anim.delay / anim.duration) * 100 + '%'});
-        anime.setValue(anim.player.endDelayEl, {width: (anim.endDelay / anim.duration) * 100 + '%'});
-      }
-      anime.setValue(anim.player.animationEl, {color: colors[colorIndex]});
-      colorIndex++;
-      if (!colors[colorIndex]) colorIndex = 0;
-      anim.update();
-      animations.push(anim);
-      return anim;
-    }
-
-    instance.pause();
-
-    var playerAnimation = anime({
-      targets: needleEl,
-      translateX: convertMStoEM(instance.duration) + 'em',
-      duration: instance.duration,
-      direction: instance.direction,
-      loop: instance.loop,
-      easing: 'linear',
-      update: function(a) {
-        instance.seek(a.currentTime);
-      }
-    });
-
-    if (instance.children.length) {
-      instance.children.forEach(function(child) {
-        console.log(child.timelineOffset);
-        child.animations.forEach(function(anim) {
-          createAnimationLog(anim, child.timelineOffset);
-        });
-      })
-    } else {
-      instance.animations.forEach(function(anim) {
-        createAnimationLog(anim);
-      });
-    }
-
-  }
-
-  animePlayer(animation, 'player-animation');
-
-</script>
-</html>
diff --git a/documentation/examples/anime-staggered-easing-demo.html b/documentation/examples/anime-staggered-easing-demo.html
new file mode 100644
index 00000000..0056c7d1
--- /dev/null
+++ b/documentation/examples/anime-staggered-easing-demo.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>stagger | anime.js</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <meta property="og:title" content="anime.js">
+  <meta property="og:url" content="https://animejs.com">
+  <meta property="og:description" content="Javascript Animation Engine">
+  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:title" content="anime.js">
+  <meta name="twitter:site" content="@juliangarnier">
+  <meta name="twitter:description" content="Javascript Animation Engine">
+  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
+  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
+  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
+  <link href="../assets/css/animejs.css" rel="stylesheet">
+  <link href="../assets/css/documentation.css" rel="stylesheet">
+  <style>
+
+    body {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .easing-visualizer {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      width: 400px;
+      height: 400px;
+    }
+
+    .easing-visualizer div {
+      width: 4px;
+      height: 4px;
+      margin: 0 0 0 0;
+      background-color: #FFF;
+      transform-origin: 50% 100%;
+      border-radius: 50%;
+    }
+
+  </style>
+</head>
+<body>
+
+  <div class="easing-visualizer"></div>
+
+</body>
+<script type="module">
+
+  import anime from '../../src/index.js';
+
+  const easingVisualizerEl = document.querySelector('.easing-visualizer');
+  const fragment = document.createDocumentFragment();
+  const numberOfElements = 101;
+
+  for (let i = 0; i < numberOfElements; i++) {
+    fragment.appendChild(document.createElement('div'));
+  }
+
+  easingVisualizerEl.appendChild(fragment);
+
+  anime({
+    targets: '.easing-visualizer div',
+    translateZ: 0,
+    translateY: (() => {
+      const keyframes = [];
+      keyframes.push(anime.penner['linear']);
+      for (let ease in anime.penner) {
+        keyframes.push({
+          value: anime.stagger([0, -400], {easing: ease}),
+          delay: anime.stagger(.125)
+        });
+      };
+      keyframes.push(anime.penner['linear']);
+      return keyframes;
+    })(),
+    easing: 'easeInOutSine',
+    duration: 6000,
+    loop: true
+  });
+
+  console.log(anime.penner);
+
+</script>
+</html>
diff --git a/documentation/examples/anime-staggering-demo.html b/documentation/examples/anime-staggering-demo.html
deleted file mode 100644
index 7fd303fc..00000000
--- a/documentation/examples/anime-staggering-demo.html
+++ /dev/null
@@ -1,155 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>stagger | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
-  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
-  <link href="../assets/css/animejs.css" rel="stylesheet">
-  <link href="../assets/css/documentation.css" rel="stylesheet">
-  <style>
-
-    body {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .easing-visualizer {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-end;
-      width: 400px;
-      height: 400px;
-    }
-
-    .easing-visualizer div {
-      width: 4px;
-      height: 4px;
-      margin: 0 0 0 0;
-      background-color: #FFF;
-      transform-origin: 50% 100%;
-      border-radius: 50%;
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="easing-visualizer"></div>
-
-</body>
-<script type="module">
-
-  import anime from '../../src/index.js';
-
-  const is = {
-    arr: a => Array.isArray(a),
-    obj: a => stringContains(Object.prototype.toString.call(a), 'Object'),
-    pth: a => is.obj(a) && a.hasOwnProperty('totalLength'),
-    svg: a => a instanceof SVGElement,
-    dom: a => a.nodeType || is.svg(a),
-    str: a => typeof a === 'string',
-    fnc: a => typeof a === 'function',
-    und: a => typeof a === 'undefined',
-    hex: a => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a),
-    rgb: a => /^rgb/.test(a),
-    hsl: a => /^hsl/.test(a),
-    col: a => (is.hex(a) || is.rgb(a) || is.hsl(a))
-  }
-
-  function getUnit(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];
-  }
-
-  function stagger(val, params = {}) {
-    const direction = params.direction || 'normal';
-    const grid = params.grid;
-    const isRange = is.arr(val);
-    const val1 = isRange ? parseFloat(val[0]) : parseFloat(val);
-    const val2 = isRange ? parseFloat(val[1]) : 0;
-    const start = params.start || 0 + (isRange ? val1 : 0);
-    const easing = params.easing ? anime.easing(params.easing) : null;
-    const unit = getUnit(isRange ? val[1] : val) || 0;
-    const values = [];
-    let maxValue = 0;
-    let from = params.from || 0;
-    let intialValue = from;
-    return (el, i, t) => {
-      if (from === 'middle') intialValue = (t - 1) / 2;
-      if (from === 'last') intialValue = t - 1;
-      if (!values.length) {
-        for (let index = 0; index < t; index++) {
-          if (grid) {
-            // const x = from !== 'middle' ? intialValue%grid[0] : (grid[0]/2)%grid[0];
-            // const y = from !== 'middle' ? Math.ceil(intialValue/grid[1]) : Math.ceil((grid[1]/2)/grid[1]);
-            const x = 19.5%grid[0];
-            const y = 4.5;
-            const dx = x - index%grid[0];
-            const dy = y - Math.ceil(index/grid[1]);
-            //console.log(dx, dy);
-            values.push(Math.sqrt(dx * dx + dy * dy));
-          } else {
-            values.push(Math.abs(intialValue - index));
-          }
-          maxValue = Math.max(...values);
-        }
-      }
-      let progress = values[i];
-      if (easing) progress = easing(progress / maxValue) * maxValue;
-      if (direction === 'reverse') progress = Math.abs(maxValue - progress);
-      const spacing = isRange ? (val2 - val1) / maxValue : val1;
-      return start + (spacing * progress) + unit;
-    }
-  }
-
-  const easingVisualizerEl = document.querySelector('.easing-visualizer');
-  const fragment = document.createDocumentFragment();
-  const numberOfElements = 101;
-
-  for (let i = 0; i < numberOfElements; i++) {
-    fragment.appendChild(document.createElement('div'));
-  }
-
-  easingVisualizerEl.appendChild(fragment);
-
-  anime({
-    targets: '.easing-visualizer div',
-    translateZ: 0,
-    translateY: (() => {
-      const keyframes = [];
-      // keyframes.push({ value: 0, delay: stagger(.125) });
-      // keyframes.push({ value: stagger([0, -400], {easing: 'steps(10)'}), delay: stagger(.125) });
-      for (let ease in anime.penner) {
-        keyframes.push({
-          value: stagger([0, -400], {easing: ease}),
-          delay: stagger(.125)
-        });
-      };
-      return keyframes;
-    })(),
-    // translateY: {
-    //   value: stagger([0, -400], {easing:'easeInOutSine'}),
-    //   delay: stagger(.125)
-    // },
-    easing: 'easeInOutSine',
-    duration: 6000,
-    loop: true
-  });
-
-  console.log(anime.penner);
-
-</script>
-</html>
diff --git a/documentation/examples/anime-timeline-stresstest.html b/documentation/examples/anime-timeline-stresstest.html
deleted file mode 100644
index d6dd1daf..00000000
--- a/documentation/examples/anime-timeline-stresstest.html
+++ /dev/null
@@ -1,141 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Anime timeline | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
-  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
-  <link href="../assets/css/animejs.css" rel="stylesheet">
-  <link href="../assets/css/documentation.css" rel="stylesheet">
-  <script src="../../lib/anime.min.js"></script>
-  <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
-  <style>
-
-    body {
-      display: flex;
-      flex-wrap: wrap;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-
-    .wrapper {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-around;
-      align-items: center;
-      height: calc(100vh - 100px);
-    }
-
-    .el {
-      width: 10px;
-      height: 10px;
-      background: #FFF;
-      margin: 10px;
-      border-radius: 50%;
-    }
-
-    .controls {
-      display: flex;
-      position: fixed;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      height: 100px;
-      background: white;
-    }
-
-    .buttons {
-      display: flex;
-    }
-
-    .buttons button {
-      width: 100px;
-    }
-
-    .timeline {
-      display: flex;
-      flex-grow: 1;
-      padding: 20px;
-    }
-
-    .progress {
-      flex-grow: 1;
-    }
-
-  </style>
-</head>
-<body>
-  <div class="wrapper"></div>
-  <div class="controls">
-    <div class="buttons">
-      <button class="play">Play</button>
-      <button class="pause">Pause</button>
-      <button class="restart">Restart</button>
-    </div>
-    <div class="timeline">
-      <input class="progress" type="range" min="0" max="100" step=".1" value="0">
-    </div>
-  </div>
-</body>
-<script>
-
-  var controlsProgressEl = document.querySelector('.controls .progress');
-
-  var tl = anime.timeline({
-    autoplay: false,
-    direction: 'alternate',
-    update: function(anim) {
-      controlsProgressEl.value = anim.progress;
-    },
-    begin: function(anim) {
-      console.log('tl begin');
-    },
-    complete: function(anim) {
-      console.log('tl complete');
-    }
-  });
-
-  document.querySelector('.controls .play').onclick = tl.play;
-  document.querySelector('.controls .pause').onclick = tl.pause;
-  document.querySelector('.controls .restart').onclick = tl.restart;
-
-  var wrapperEl = document.querySelector('.wrapper');
-  var numberOfEls = 1000;
-  var fragment = document.createDocumentFragment();
-
-  function createEl(i) {
-    var el = document.createElement('div');
-    el.classList.add('el');
-    var hue = Math.round(180 / numberOfEls * i);
-    el.style.backgroundColor = 'hsl(' + hue + ', 60%, 60%)';
-    tl.add({
-      targets: el,
-      scale: [0, 2],
-      duration: 5000,
-      easing: 'easeOutElastic(1, .1)',
-    }, !i ? 0 : '-=4999');
-    fragment.appendChild(el);
-  };
-
-  for (let i = 0; i < numberOfEls; i++) createEl(i);
-
-  wrapperEl.appendChild(fragment);
-
-  controlsProgressEl.addEventListener('input', function() {
-    tl.seek(tl.duration * (controlsProgressEl.value / 100));
-  });
-
-  </script>
-  <script src="../assets/js/vendors/stats.min.js"></script>
-</html>
diff --git a/documentation/examples/anime-v2-logo-animation.html b/documentation/examples/anime-v2-logo-animation.html
index f74032b1..40dfad73 100644
--- a/documentation/examples/anime-v2-logo-animation.html
+++ b/documentation/examples/anime-v2-logo-animation.html
@@ -15,6 +15,7 @@
   <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
   <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
   <link rel="icon" type="image/png" href="../assets/img/favicon.png">
+  <link href="../assets/css/animejs.css" rel="stylesheet">
   <link href="../assets/css/documentation.css" rel="stylesheet">
   <script src="../../lib/anime.min.js"></script>
   <!-- <script src="../assets/js/anime/anime.2.2.0.js"></script> -->
@@ -245,7 +246,7 @@
             easing: 'easeOutQuart'
           },
           stroke: {
-            value: ['#FFF', function(el) { return anime.getValue(el.parentNode, 'stroke') } ],
+            value: ['#FFF', function(el) { return anime.get(el.parentNode, 'stroke') } ],
             duration: 500,
             delay: 500,
             easing: 'easeInQuad'
@@ -302,7 +303,7 @@
             easing: 'easeInQuad'
           },
           stroke: {
-            value: ['#FFF', function(el) { return anime.getValue(el, 'stroke') } ],
+            value: ['#FFF', function(el) { return anime.get(el, 'stroke') } ],
             duration: 800,
             delay: 3400,
             easing: 'easeInQuad'
diff --git a/documentation/examples/anime-v3-logo-animation.html b/documentation/examples/anime-v3-logo-animation.html
deleted file mode 100644
index 663ce8f4..00000000
--- a/documentation/examples/anime-v3-logo-animation.html
+++ /dev/null
@@ -1,158 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Anime logo animation | anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
-  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
-  <link href="documentation/assets/css/animejs.css" rel="stylesheet">
-  <script src="../../lib/anime.min.js"></script>
-  <style>
-
-    .logo-section {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100vh;
-    }
-
-    .logo-animation {
-      position: relative;
-      width: 940px;
-      height: 120px;
-    }
-
-    .logo-letters-wrapper {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .letter-wrapper {
-      height: 120px;
-    }
-
-    .logo-letter {
-      transform: scaleY(.5);
-      transform-origin: 50% 0%;
-    }
-
-    .logo-letter path {
-      fill: none;
-      fill-rule: evenodd;
-      stroke-linecap: square;
-      stroke-width: 40;
-      stroke: #3E3E3E;
-    }
-
-    .logo-dot {
-      position: absolute;
-      bottom: 0;
-      width: 40px;
-      height: 40px;
-      margin: -20px 0 0 -20px;
-      background-color: #3E3E3E;
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="logo-section">
-
-    <div class="logo-animation">
-
-      <div class="logo-dot"></div>
-
-      <div class="logo-letters-wrapper">
-
-        <div class="letter-wrapper">
-          <svg class="bounced" viewBox="0 0 180 240" width="180" height="240">
-            <path class="line" d="M20 20h130c5.523 0 10 8.954 10 40v160H30c-5.523 0-10-8.954-10-40v-60c0-31.046 4.477-40 10-40h110"/>
-          </svg>
-        </div>
-        <div class="letter-wrapper">
-          <svg class="bounced" viewBox="0 0 180 240" width="180" height="240">
-            <path class="line" d="M160 220V60c0-31.046-8.656-40-19.333-40H39.333C28.656 20 20 28.954 20 60v160"/>
-          </svg>
-        </div>
-        <div class="letter-wrapper">
-          <svg class="bounced" viewBox="0 0 40 240" width="40" height="240">
-            <path stroke-width="40" d="M20 20v200"/>
-          </svg>
-        </div>
-        <div class="letter-wrapper">
-          <svg class="bounced" viewBox="0 0 320 240" width="320" height="240">
-            <path class="line" d="M300 220V60c0-31.046-8.656-40-19.333-40H39.333C28.656 20 20 28.954 20 60v160"/>
-          </svg>
-        </div>
-        <div class="letter-wrapper">
-          <svg class="bounced" viewBox="0 0 180 240" width="180" height="240">
-            <path class="line" d="M40 160h110c5.523 0 10-8.954 10-40V60c0-31.046-4.477-40-10-40H30c-5.523 0-10 8.95-10 40v120c0 31.046 4.477 40 10 40h130"/>
-          </svg>
-        </div>
-
-      </div>
-
-
-  </div>
-
-  <script>
-
-    var logoAnimation = (function() {
-
-      var logoAnimationEl = document.querySelector('.logo-animation');
-      var bouncePath = anime.path('.bounce path');
-      var versionNumerEls = document.querySelectorAll('.version-number');
-      var dateEl = document.querySelector('.date');
-      var date = new Date();
-
-      // for (var i = 0; i < versionNumerEls.length; i++) {
-      //   versionNumerEls[i].innerHTML = anime.version;
-      // }
-      // dateEl.innerHTML = date.getFullYear();
-
-      // anime.setValue(['.letter-a', '.letter-n', '.letter-i'], {translateX: 56});
-      // anime.setValue('.letter-e', {translateX: -56});
-      // anime.setValue('.dot', { translateX: 448, translateY: -100 });
-
-      anime.setValue(['.logo-dot'], {
-        translateX: 90,
-        translateY: -400
-      });
-
-      var logoAnimationTL = anime.timeline({
-        easing: 'easeOutSine'
-      })
-      .add({
-        targets: '.logo-dot',
-        keyframes: [
-          {translateY: 0, duration: 300},
-          {scaleY: .5},
-          {translateX: '+=190'},
-          {translateY: '+=190'}
-        ],
-      })
-
-      // anime.speed = .2;
-      // logoAnimationTL.pause();
-      // logoAnimationTL.seek(1400);
-      // logoAnimationTL.play();
-
-      return logoAnimationTL;
-
-    })();
-
-  </script>
-</body>
-</html>
diff --git a/documentation/examples/built-in-easings-2.html b/documentation/examples/built-in-easings-2.html
deleted file mode 100644
index 1023bc8e..00000000
--- a/documentation/examples/built-in-easings-2.html
+++ /dev/null
@@ -1,135 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>built-in easings • anime.js</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-  <meta property="og:title" content="anime.js">
-  <meta property="og:url" content="https://animejs.com">
-  <meta property="og:description" content="Javascript Animation Engine">
-  <meta property="og:image" content="https://animejs.com/documentation/assets/img/icons/og.png">
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:title" content="anime.js">
-  <meta name="twitter:site" content="@juliangarnier">
-  <meta name="twitter:description" content="Javascript Animation Engine">
-  <meta name="twitter:image" content="https://animejs.com/documentation/assets/img/icons/twitter.png">
-  <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
-  <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
-  <link href="../assets/css/animejs.css" rel="stylesheet">
-  <style>
-
-    :root {
-      font-size: 24px;
-    }
-
-    body {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-    }
-
-    .easing-visualizer {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      max-width: 908px;
-      padding-bottom: 50%;
-    }
-
-    .easing-visualizer .wrapper {
-      position: absolute;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      height: 100%;
-    }
-
-    .easing-visualizer .bar {
-      width: 2px;
-      height: 4px;
-      margin: 0 3px;
-      background-color: currentColor;
-      transform-origin: 50% 50%;
-    }
-
-    .easing-visualizer .dot {
-      position: relative;
-      width: 8px;
-      height: 8px;
-      background-color: currentColor;
-      border-radius: 50%;
-    }
-
-  </style>
-</head>
-<body>
-
-  <div class="easing-visualizer">
-    <div class="wrapper bars-wrapper"></div>
-    <div class="wrapper dots-wrapper"></div>
-  </div>
-
-</body>
-<script type="module">
-
-  import anime from '../../src/index.js';
-
-  const easingVisualizerEl = document.querySelector('.easing-visualizer');
-  const barsWrapperEl = easingVisualizerEl.querySelector('.bars-wrapper');
-  const dotsWrapperEl = easingVisualizerEl.querySelector('.dots-wrapper');
-  const barsFragment = document.createDocumentFragment();
-  const dotsFragment = document.createDocumentFragment();
-  const numberOfBars = 101;
-
-  for (let i = 0; i < numberOfBars; i++) {
-    const barEl = document.createElement('div');
-    const dotEl = document.createElement('div');
-    barEl.classList.add('bar');
-    dotEl.classList.add('dot');
-    dotEl.classList.add('color-red');
-    barsFragment.appendChild(barEl);
-    dotsFragment.appendChild(dotEl);
-  }
-
-  barsWrapperEl.appendChild(barsFragment);
-  dotsWrapperEl.appendChild(dotsFragment);
-
-  // anime.setValue('.easing-visualizer .dot', { translateX: anime.stagger(6) });
-
-  function animateEasing() {
-
-    const easings = [];
-    for (let ease in anime.penner) easings.push(ease);
-    easings.push('steps('+anime.random(5, 20)+')');
-    easings.push('cubicBezier(0.545, 0.475, 0.145, 1)');
-    const ease = easings[anime.random(0, easings.length - 1)];
-    const duration = 450;
-
-    anime.timeline({
-      complete: animateEasing,
-      easing: ease,
-      duration: duration
-    })
-    .add({
-      targets: '.easing-visualizer .bar',
-      scaleY: anime.stagger([1, 100], {easing: ease, from: 'center', direction: 'reverse'}),
-      delay: anime.stagger(14, {from: 'center'})
-    })
-    .add({
-      targets: '.easing-visualizer .dot',
-      translateY: anime.stagger(['-6rem', '6rem'], {easing: ease, from: 'last'}),
-      delay: anime.stagger(10, {from: 'center'})
-    }, 0);
-
-  }
-
-  animateEasing();
-
-</script>
-</html>
diff --git a/documentation/examples/built-in-easings.html b/documentation/examples/built-in-easings.html
index f2d4a5c2..26adf817 100644
--- a/documentation/examples/built-in-easings.html
+++ b/documentation/examples/built-in-easings.html
@@ -16,6 +16,7 @@
   <link rel="apple-touch-icon-precomposed" href="../assets/img/social-media-image.png">
   <link rel="icon" type="image/png" href="../assets/img/favicon.png" >
   <link href="../assets/css/animejs.css" rel="stylesheet">
+  <link href="../assets/css/documentation.css" rel="stylesheet">
   <style>
 
     :root {
@@ -34,26 +35,34 @@
       position: relative;
       display: flex;
       align-items: center;
-      width: 16rem;
-      height: 16rem;
+      justify-content: space-between;
+      width: 100%;
+      max-width: 908px;
+      padding-bottom: 50%;
+    }
+
+    .easing-visualizer .wrapper {
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      height: 100%;
     }
 
     .easing-visualizer .bar {
       width: 2px;
       height: 4px;
+      margin: 0 3px;
       background-color: currentColor;
       transform-origin: 50% 50%;
     }
 
-    .easing-visualizer .bar:not(:last-child) {
-      margin-right: 4px;
-    }
-
     .easing-visualizer .dot {
-      position: absolute;
+      position: relative;
       width: 8px;
       height: 8px;
-      margin-left: -3px;
       background-color: currentColor;
       border-radius: 50%;
     }
@@ -62,7 +71,10 @@
 </head>
 <body>
 
-  <div class="easing-visualizer"></div>
+  <div class="easing-visualizer">
+    <div class="wrapper bars-wrapper"></div>
+    <div class="wrapper dots-wrapper"></div>
+  </div>
 
 </body>
 <script type="module">
@@ -70,8 +82,11 @@
   import anime from '../../src/index.js';
 
   const easingVisualizerEl = document.querySelector('.easing-visualizer');
-  const fragment = document.createDocumentFragment();
-  const numberOfBars = 63;
+  const barsWrapperEl = easingVisualizerEl.querySelector('.bars-wrapper');
+  const dotsWrapperEl = easingVisualizerEl.querySelector('.dots-wrapper');
+  const barsFragment = document.createDocumentFragment();
+  const dotsFragment = document.createDocumentFragment();
+  const numberOfBars = 101;
 
   for (let i = 0; i < numberOfBars; i++) {
     const barEl = document.createElement('div');
@@ -79,13 +94,14 @@
     barEl.classList.add('bar');
     dotEl.classList.add('dot');
     dotEl.classList.add('color-red');
-    fragment.appendChild(barEl);
-    fragment.appendChild(dotEl);
+    barsFragment.appendChild(barEl);
+    dotsFragment.appendChild(dotEl);
   }
 
-  easingVisualizerEl.appendChild(fragment);
+  barsWrapperEl.appendChild(barsFragment);
+  dotsWrapperEl.appendChild(dotsFragment);
 
-  anime.setValue('.easing-visualizer .dot', { translateX: anime.stagger(6) });
+  // anime.setValue('.easing-visualizer .dot', { translateX: anime.stagger(6) });
 
   function animateEasing() {
 
@@ -103,7 +119,7 @@
     })
     .add({
       targets: '.easing-visualizer .bar',
-      scaleY: anime.stagger([1, 88], {easing: ease, from: 'center', direction: 'reverse'}),
+      scaleY: anime.stagger([1, 100], {easing: ease, from: 'center', direction: 'reverse'}),
       delay: anime.stagger(14, {from: 'center'})
     })
     .add({
diff --git a/documentation/examples/time-control.html b/documentation/examples/time-control.html
index fae626cb..7de79990 100644
--- a/documentation/examples/time-control.html
+++ b/documentation/examples/time-control.html
@@ -367,7 +367,7 @@ <h1 class="section-title">
 
   for (var i = 0; i < infoEls.length; i++) {
     var infoEl = infoEls[i];
-    var delay = parseFloat(anime.getValue(infoEl, 'data-delay'));
+    var delay = parseFloat(anime.get(infoEl, 'data-delay'));
     var direction = infoEl.classList.contains('info-bottom') ? -1 : 1;
     timeControlAnimation
     .add({
diff --git a/documentation/examples/transforms-demo.html b/documentation/examples/transforms-demo.html
index 73437605..ab90a0a4 100644
--- a/documentation/examples/transforms-demo.html
+++ b/documentation/examples/transforms-demo.html
@@ -19,7 +19,7 @@
   <style>
 
     :root {
-      font-size: 24px;
+      font-size: 16px;
     }
 
     body {
@@ -40,7 +40,7 @@
       position: absolute;
       width: 1rem;
       height: 1rem;
-      border-radius: 50%;
+      /*border-radius: 50%;*/
       background-color: currentColor;
     }
 
@@ -68,7 +68,7 @@
 
   easingVisualizerEl.appendChild(fragment);
 
-  anime.setValue('.transform-demo .dot', {rotate: function() { return anime.random(0, 360); } });
+  // anime.set('.transform-demo .dot', {rotate: function() { return anime.random(0, 360); } });
 
   anime({
     targets: '.transform-demo .dot',
@@ -76,7 +76,7 @@
       var keyframes = [];
       for (var i = 0; i < 40; i++) {
         keyframes.push({
-          value: function() { return anime.random(50, 150) / 100; },
+          value: function() { return anime.random(25, 125) / 100; },
           duration: anime.random(500, 1000),
         });
       }
@@ -86,7 +86,7 @@
       var keyframes = [];
       for (var i = 0; i < 40; i++) {
         keyframes.push({
-          value: function() { return anime.random(0, 50) + 'vh'; },
+          value: function() { return anime.random(-25, 25) + 'vh'; },
           duration: anime.random(1000, 2000),
         });
       }
@@ -96,13 +96,14 @@
       var keyframes = [];
       for (var i = 0; i < 40; i++) {
         keyframes.push({
-          value: function() { return anime.random(0, 50) + 'vh'; },
+          value: function() { return anime.random(-25, 25) + 'vh'; },
           duration: anime.random(2000, 4000),
         });
       }
       return keyframes;
     })(),
-    easing: 'easeOutQuad'
+    easing: 'easeOutQuad',
+    delay: anime.stagger(2)
   })
 
 </script>

From 8b6721cbd666186c2f6f446db010e49421dfd8d4 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 15:47:37 +0200
Subject: [PATCH 32/34] Bump version number

---
 lib/anime.es.js  | 4 ++--
 lib/anime.js     | 4 ++--
 lib/anime.min.js | 2 +-
 src/index.js     | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/anime.es.js b/lib/anime.es.js
index 6536c994..cd25fd0c 100644
--- a/lib/anime.es.js
+++ b/lib/anime.es.js
@@ -886,7 +886,7 @@ function handleVisibilityChange() {
   if (document.hidden) {
     activeInstances.forEach(function (ins) { return ins.pause(); });
     pausedInstances = activeInstances.slice(0);
-    activeInstances = [];
+    anime.running = activeInstances = [];
   } else {
     pausedInstances.forEach(function (ins) { return ins.play(); });
   }
@@ -1262,7 +1262,7 @@ function timeline(params) {
   return tl;
 }
 
-anime.version = '3.0.1';
+anime.version = '3.1.0';
 anime.speed = 1;
 anime.running = activeInstances;
 anime.remove = removeTargets;
diff --git a/lib/anime.js b/lib/anime.js
index 678266db..9c78f7bf 100644
--- a/lib/anime.js
+++ b/lib/anime.js
@@ -888,7 +888,7 @@ function handleVisibilityChange() {
   if (document.hidden) {
     activeInstances.forEach(function (ins) { return ins.pause(); });
     pausedInstances = activeInstances.slice(0);
-    activeInstances = [];
+    anime.running = activeInstances = [];
   } else {
     pausedInstances.forEach(function (ins) { return ins.play(); });
   }
@@ -1264,7 +1264,7 @@ function timeline(params) {
   return tl;
 }
 
-anime.version = '3.0.1';
+anime.version = '3.1.0';
 anime.speed = 1;
 anime.running = activeInstances;
 anime.remove = removeTargets;
diff --git a/lib/anime.min.js b/lib/anime.min.js
index 469d1097..99b263aa 100644
--- a/lib/anime.min.js
+++ b/lib/anime.min.js
@@ -5,4 +5,4 @@
  * animejs.com
  */
 
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},r=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],t={CSS:{},springs:{}};function a(n,e,r){return Math.min(Math.max(n,e),r)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var r=c(n),o=a(i.und(r[0])?1:r[0],.1,100),u=a(i.und(r[1])?100:r[1],.1,100),s=a(i.und(r[2])?10:r[2],.1,100),f=a(i.und(r[3])?0:r[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(h*Math.cos(p*r)+v*Math.sin(p*r)):(h+v*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function u(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,i){if(0<=r&&r<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(r!==t||a!==i)for(var s=0;s<n;++s)c[s]=o(s*e,r,a);return function(n){return r===t&&a===i?n:0===n||1===n?n:o(f(n),t,i)}}function f(t){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=t;++s)i+=e;var l=i+(t-c[--s])/(c[s+1]-c[s])*e,d=u(l,r,a);return d>=.001?function(n,e,r,t){for(var a=0;a<4;++a){var i=u(e,r,t);if(0===i)return e;e-=(o(e,r,t)-n)/i}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var u,i,c=0;(u=o(i=e+(r-e)/2,t,a)-n)>0?r=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(t,i,i+e,r,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,r=4;n<((e=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,r){return function(t){return 1-e(n,r)(1-t)}},l["easeInOut"+n]=function(n,r){return function(t){return t<.5?e(n,r)(2*t)/2:1-e(n,r)(-2*t+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var r=n.split("(")[0],t=h[r],a=c(n);switch(r){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(t,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<r;o++)if(o in n){var u=n[o];e.call(t,u,o,n)&&a.push(u)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var r in n)e[r]=n[r];return e}function w(n,e){var r=x(n);for(var t in n)r[t]=e.hasOwnProperty(t)?e[t]:n[t];return r}function k(n,e){var r=x(n);for(var t in e)r[t]=i.und(n[t])?e[t]:n[t];return r}function O(n){return i.rgb(n)?(r=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+r[1]+",1)":e:i.hex(n)?(t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,r,t){return e+e+r+r+t+t}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,r,t,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,u=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==u)e=r=t=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),r=s(l,f,o),t=s(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+c+")"}(n):void 0;var e,r,t,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function B(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(M([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+r;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return t.CSS[e+r]=s,s}function T(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return i.dom(n)&&!i.inp(n)&&(P(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(r,e)?"transform":i.dom(n)&&"transform"!==e&&T(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return r&&(r.transforms.list.set(e,i),r.transforms.last=e),t?I(n,i,t):i}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return T(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e?t+e:t}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a<r.numberOfItems;a++){var o=r.getItem(a);a>0&&(t+=j(e,o)),e=o}return t}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return j({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+j(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function $(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),u=a.width,c=a.height,s=r.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:t,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=$(n.el,n.svg),a=r(),o=r(-1),u=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var r=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,t=L(i.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:i.str(n)||e?t.split(r):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var r=x(e);if(/^spring/.test(r.easing)&&(r.duration=s(r.easing)),i.arr(n)){var t=n.length;2===t&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(r.duration=e.duration/t)}var a=i.arr(n)?n:[n];return a.map(function(n,r){var t=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(t.delay)&&(t.delay=r?0:e.delay),i.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return k(n,r)})}function z(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)i.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a<e.length;a++)t(a);return r}(t),e)),e)i.key(a)&&r.push({name:a,tweens:V(e[a],n)});return r}function H(n,e){var r;return n.tweens.map(function(t){var a=function(n,e){var r={};for(var t in n){var a=B(n[t],e);i.arr(a)&&1===(a=a.map(function(n){return B(n,e)})).length&&(a=a[0]),r[t]=a}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(t,e),o=a.value,u=i.arr(o)?o[1]:o,c=C(u),s=N(e.target,n.name,c,e),f=r?r.to.original:s,l=i.arr(o)?o[0]:f,d=C(l)||C(s),p=c||d;return i.und(u)&&(u=f),a.from=Y(l,p),a.to=Y(A(u,l),p),a.start=r?r.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(o),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),r=a,a})}var G={css:function(n,e,r){return n.style[e]=r},attribute:function(n,e,r){return n.setAttribute(e,r)},object:function(n,e,r){return n[e]=r},transform:function(n,e,r,t,a){if(t.list.set(e,r),e===t.last||a){var o="";t.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function R(n,e){Q(n).forEach(function(n){for(var r in e){var t=B(e[r],n),a=n.target,o=C(t),u=N(a,r,o,n),i=A(L(t,o||C(u)),u),c=D(a,r);G[c](a,r,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var r=D(n.target,e.name);if(r){var t=H(e,n),a=t[t.length-1];return{type:r,property:e.name,animatable:n,tweens:t,duration:a.end,delay:t[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var r=n.length,t=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=r?Math.max.apply(Math,n.map(function(n){return t(n)+n.duration})):e.duration,a.delay=r?Math.min.apply(Math,n.map(function(n){return t(n)+n.delay})):e.delay,a.endDelay=r?a.duration-Math.max.apply(Math,n.map(function(n){return t(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var r=_.length;if(r){for(var t=0;t<r;){var a=_[t];if(a.paused){var o=_.indexOf(a);o>-1&&(_.splice(o,1),r=_.length)}else a.tick(e);t++}n()}else U=cancelAnimationFrame(U)}return n}();function rn(r){void 0===r&&(r={});var t,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=r),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,t.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/rn.speed)}function B(n,e){e&&e.seek(n-e.timelineOffset)}function P(n){for(var e=0,r=M.animations,t=r.length;e<t;){var o=r[e],u=o.animatable,i=o.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],B=h[O];isNaN(B)||(g+=C?B+C:B+" ")}}else g=h[0];G[o.type](u.target,o.property,g,u.transforms),o.currentValue=g,e++}}function I(n){M[n]&&!M.passThrough&&M[n](M)}function T(n){var e=M.duration,r=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,t&&function(n){if(M.reversePlayback)for(var e=c;e--;)B(n,t[e]);else for(var r=0;r<c;r++)B(n,t[r])}(d),!M.began&&M.currentTime>0&&(M.began=!0,I("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,I("loopBegin")),d<=r&&0!==M.currentTime&&P(0),(d>=l&&M.currentTime!==e||!e)&&P(e),d>r&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,I("changeBegin")),I("change"),P(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,I("changeComplete")),M.currentTime=a(d,0,e),M.began&&I("update"),n>=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,I("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,I("loopComplete"),I("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,t=M.children;for(var e=c=t.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,P(M.reversed?M.duration:0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),T((i+(u-o))*rn.speed)},M.seek=function(n){T(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var r=e.length;r--;)M(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),_=[]):nn.forEach(function(n){return n.play()})}),rn.version="3.0.1",rn.speed=1,rn.running=_,rn.remove=function(n){for(var e=Z(n),r=_.length;r--;){var t=_[r],a=t.animations,o=t.children;tn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;tn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||t.pause()}},rn.get=N,rn.set=R,rn.convertPx=I,rn.path=function(n,e){var r=i.str(n)?g(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:$(r),totalLength:q(r)*(t/100)}}},rn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},rn.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:u%a[0],M=s?(a[1]-1)/2:Math.floor(u/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===o&&(k=-x),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(u-v));y=Math.max.apply(Math,m)}t&&(m=m.map(function(n){return t(n/y)*y})),"reverse"===r&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},rn.timeline=function(n){void 0===n&&(n={});var r=rn(n);return r.duration=0,r.add=function(t,a){var o=_.indexOf(r),u=r.children;function c(n){n.passThrough=!0}o>-1&&_.splice(o,1);for(var s=0;s<u.length;s++)c(u[s]);var f=k(t,w(e,n));f.targets=f.targets||n.targets;var l=r.duration;f.autoplay=!1,f.direction=r.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(r),r.seek(f.timelineOffset);var d=rn(f);c(d),u.push(d);var p=J(u,n);return r.delay=p.delay,r.endDelay=p.endDelay,r.duration=p.duration,r.seek(0),r.reset(),r.autoplay&&r.play(),r},r},rn.easing=v,rn.penner=h,rn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},rn});
\ No newline at end of file
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):n.anime=e()}(this,function(){"use strict";var n={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},e={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},r=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective"],t={CSS:{},springs:{}};function a(n,e,r){return Math.min(Math.max(n,e),r)}function o(n,e){return n.indexOf(e)>-1}function u(n,e){return n.apply(null,e)}var i={arr:function(n){return Array.isArray(n)},obj:function(n){return o(Object.prototype.toString.call(n),"Object")},pth:function(n){return i.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||i.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return i.hex(n)||i.rgb(n)||i.hsl(n)},key:function(r){return!n.hasOwnProperty(r)&&!e.hasOwnProperty(r)&&"targets"!==r&&"keyframes"!==r}};function c(n){var e=/\(([^)]+)\)/.exec(n);return e?e[1].split(",").map(function(n){return parseFloat(n)}):[]}function s(n,e){var r=c(n),o=a(i.und(r[0])?1:r[0],.1,100),u=a(i.und(r[1])?100:r[1],.1,100),s=a(i.und(r[2])?10:r[2],.1,100),f=a(i.und(r[3])?0:r[3],.1,100),l=Math.sqrt(u/o),d=s/(2*Math.sqrt(u*o)),p=d<1?l*Math.sqrt(1-d*d):0,h=1,v=d<1?(d*l-f)/p:-f+l;function g(n){var r=e?e*n/1e3:n;return r=d<1?Math.exp(-r*d*l)*(h*Math.cos(p*r)+v*Math.sin(p*r)):(h+v*r)*Math.exp(-r*l),0===n||1===n?n:1-r}return e?g:function(){var e=t.springs[n];if(e)return e;for(var r=0,a=0;;)if(1===g(r+=1/6)){if(++a>=16)break}else a=0;var o=r*(1/6)*1e3;return t.springs[n]=o,o}}function f(n){return void 0===n&&(n=10),function(e){return Math.round(e*n)*(1/n)}}var l,d,p=function(){var n=11,e=1/(n-1);function r(n,e){return 1-3*e+3*n}function t(n,e){return 3*e-6*n}function a(n){return 3*n}function o(n,e,o){return((r(e,o)*n+t(e,o))*n+a(e))*n}function u(n,e,o){return 3*r(e,o)*n*n+2*t(e,o)*n+a(e)}return function(r,t,a,i){if(0<=r&&r<=1&&0<=a&&a<=1){var c=new Float32Array(n);if(r!==t||a!==i)for(var s=0;s<n;++s)c[s]=o(s*e,r,a);return function(n){return r===t&&a===i?n:0===n||1===n?n:o(f(n),t,i)}}function f(t){for(var i=0,s=1,f=n-1;s!==f&&c[s]<=t;++s)i+=e;var l=i+(t-c[--s])/(c[s+1]-c[s])*e,d=u(l,r,a);return d>=.001?function(n,e,r,t){for(var a=0;a<4;++a){var i=u(e,r,t);if(0===i)return e;e-=(o(e,r,t)-n)/i}return e}(t,l,r,a):0===d?l:function(n,e,r,t,a){for(var u,i,c=0;(u=o(i=e+(r-e)/2,t,a)-n)>0?r=i:e=i,Math.abs(u)>1e-7&&++c<10;);return i}(t,i,i+e,r,a)}}}(),h=(l={linear:function(){return function(n){return n}}},d={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var e,r=4;n<((e=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*e-2)/22-n,2)}},Elastic:function(n,e){void 0===n&&(n=1),void 0===e&&(e=.5);var r=a(n,1,10),t=a(e,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-t/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/t)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach(function(n,e){d[n]=function(){return function(n){return Math.pow(n,e+2)}}}),Object.keys(d).forEach(function(n){var e=d[n];l["easeIn"+n]=e,l["easeOut"+n]=function(n,r){return function(t){return 1-e(n,r)(1-t)}},l["easeInOut"+n]=function(n,r){return function(t){return t<.5?e(n,r)(2*t)/2:1-e(n,r)(-2*t+2)/2}}}),l);function v(n,e){if(i.fnc(n))return n;var r=n.split("(")[0],t=h[r],a=c(n);switch(r){case"spring":return s(n,e);case"cubicBezier":return u(p,a);case"steps":return u(f,a);default:return u(t,a)}}function g(n){try{return document.querySelectorAll(n)}catch(n){return}}function m(n,e){for(var r=n.length,t=arguments.length>=2?arguments[1]:void 0,a=[],o=0;o<r;o++)if(o in n){var u=n[o];e.call(t,u,o,n)&&a.push(u)}return a}function y(n){return n.reduce(function(n,e){return n.concat(i.arr(e)?y(e):e)},[])}function b(n){return i.arr(n)?n:(i.str(n)&&(n=g(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function M(n,e){return n.some(function(n){return n===e})}function x(n){var e={};for(var r in n)e[r]=n[r];return e}function w(n,e){var r=x(n);for(var t in n)r[t]=e.hasOwnProperty(t)?e[t]:n[t];return r}function k(n,e){var r=x(n);for(var t in e)r[t]=i.und(n[t])?e[t]:n[t];return r}function O(n){return i.rgb(n)?(r=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(e=n))?"rgba("+r[1]+",1)":e:i.hex(n)?(t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(n,e,r,t){return e+e+r+r+t+t}),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t),"rgba("+parseInt(a[1],16)+","+parseInt(a[2],16)+","+parseInt(a[3],16)+",1)"):i.hsl(n)?function(n){var e,r,t,a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),o=parseInt(a[1],10)/360,u=parseInt(a[2],10)/100,i=parseInt(a[3],10)/100,c=a[4]||1;function s(n,e,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?n+6*(e-n)*r:r<.5?e:r<2/3?n+(e-n)*(2/3-r)*6:n}if(0==u)e=r=t=i;else{var f=i<.5?i*(1+u):i+u-i*u,l=2*i-f;e=s(l,f,o+1/3),r=s(l,f,o),t=s(l,f,o-1/3)}return"rgba("+255*e+","+255*r+","+255*t+","+c+")"}(n):void 0;var e,r,t,a}function C(n){var e=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(e)return e[1]}function B(n,e){return i.fnc(n)?n(e.target,e.id,e.total):n}function P(n,e){return n.getAttribute(e)}function I(n,e,r){if(M([r,"deg","rad","turn"],C(e)))return e;var a=t.CSS[e+r];if(!i.und(a))return a;var o=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(o),o.style.position="absolute",o.style.width=100+r;var c=100/o.offsetWidth;u.removeChild(o);var s=c*parseFloat(e);return t.CSS[e+r]=s,s}function T(n,e,r){if(e in n.style){var t=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),a=n.style[e]||getComputedStyle(n).getPropertyValue(t)||"0";return r?I(n,a,r):a}}function D(n,e){return i.dom(n)&&!i.inp(n)&&(P(n,e)||i.svg(n)&&n[e])?"attribute":i.dom(n)&&M(r,e)?"transform":i.dom(n)&&"transform"!==e&&T(n,e)?"css":null!=n[e]?"object":void 0}function E(n){if(i.dom(n)){for(var e,r=n.style.transform||"",t=/(\w+)\(([^)]*)\)/g,a=new Map;e=t.exec(r);)a.set(e[1],e[2]);return a}}function F(n,e,r,t){var a,u=o(e,"scale")?1:0+(o(a=e,"translate")||"perspective"===a?"px":o(a,"rotate")||o(a,"skew")?"deg":void 0),i=E(n).get(e)||u;return r&&(r.transforms.list.set(e,i),r.transforms.last=e),t?I(n,i,t):i}function N(n,e,r,t){switch(D(n,e)){case"transform":return F(n,e,t,r);case"css":return T(n,e,r);case"attribute":return P(n,e);default:return n[e]||0}}function A(n,e){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var t=C(n)||0,a=parseFloat(e),o=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return a+o+t;case"-":return a-o+t;case"*":return a*o+t}}function L(n,e){if(i.col(n))return O(n);if(/\s/g.test(n))return n;var r=C(n),t=r?n.substr(0,n.length-r.length):n;return e?t+e:t}function j(n,e){return Math.sqrt(Math.pow(e.x-n.x,2)+Math.pow(e.y-n.y,2))}function S(n){for(var e,r=n.points,t=0,a=0;a<r.numberOfItems;a++){var o=r.getItem(a);a>0&&(t+=j(e,o)),e=o}return t}function q(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return o=n,2*Math.PI*P(o,"r");case"rect":return 2*P(a=n,"width")+2*P(a,"height");case"line":return j({x:P(t=n,"x1"),y:P(t,"y1")},{x:P(t,"x2"),y:P(t,"y2")});case"polyline":return S(n);case"polygon":return r=(e=n).points,S(e)+j(r.getItem(r.numberOfItems-1),r.getItem(0))}var e,r,t,a,o}function $(n,e){var r=e||{},t=r.el||function(n){for(var e=n.parentNode;i.svg(e)&&i.svg(e.parentNode);)e=e.parentNode;return e}(n),a=t.getBoundingClientRect(),o=P(t,"viewBox"),u=a.width,c=a.height,s=r.viewBox||(o?o.split(" "):[0,0,u,c]);return{el:t,viewBox:s,x:s[0]/1,y:s[1]/1,w:u/s[2],h:c/s[3]}}function X(n,e){function r(r){void 0===r&&(r=0);var t=e+r>=1?e+r:0;return n.el.getPointAtLength(t)}var t=$(n.el,n.svg),a=r(),o=r(-1),u=r(1);switch(n.property){case"x":return(a.x-t.x)*t.w;case"y":return(a.y-t.y)*t.h;case"angle":return 180*Math.atan2(u.y-o.y,u.x-o.x)/Math.PI}}function Y(n,e){var r=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,t=L(i.pth(n)?n.totalLength:n,e)+"";return{original:t,numbers:t.match(r)?t.match(r).map(Number):[0],strings:i.str(n)||e?t.split(r):[]}}function Z(n){return m(n?y(i.arr(n)?n.map(b):b(n)):[],function(n,e,r){return r.indexOf(n)===e})}function Q(n){var e=Z(n);return e.map(function(n,r){return{target:n,id:r,total:e.length,transforms:{list:E(n)}}})}function V(n,e){var r=x(e);if(/^spring/.test(r.easing)&&(r.duration=s(r.easing)),i.arr(n)){var t=n.length;2===t&&!i.obj(n[0])?n={value:n}:i.fnc(e.duration)||(r.duration=e.duration/t)}var a=i.arr(n)?n:[n];return a.map(function(n,r){var t=i.obj(n)&&!i.pth(n)?n:{value:n};return i.und(t.delay)&&(t.delay=r?0:e.delay),i.und(t.endDelay)&&(t.endDelay=r===a.length-1?e.endDelay:0),t}).map(function(n){return k(n,r)})}function z(n,e){var r=[],t=e.keyframes;for(var a in t&&(e=k(function(n){for(var e=m(y(n.map(function(n){return Object.keys(n)})),function(n){return i.key(n)}).reduce(function(n,e){return n.indexOf(e)<0&&n.push(e),n},[]),r={},t=function(t){var a=e[t];r[a]=n.map(function(n){var e={};for(var r in n)i.key(r)?r==a&&(e.value=n[r]):e[r]=n[r];return e})},a=0;a<e.length;a++)t(a);return r}(t),e)),e)i.key(a)&&r.push({name:a,tweens:V(e[a],n)});return r}function H(n,e){var r;return n.tweens.map(function(t){var a=function(n,e){var r={};for(var t in n){var a=B(n[t],e);i.arr(a)&&1===(a=a.map(function(n){return B(n,e)})).length&&(a=a[0]),r[t]=a}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(t,e),o=a.value,u=i.arr(o)?o[1]:o,c=C(u),s=N(e.target,n.name,c,e),f=r?r.to.original:s,l=i.arr(o)?o[0]:f,d=C(l)||C(s),p=c||d;return i.und(u)&&(u=f),a.from=Y(l,p),a.to=Y(A(u,l),p),a.start=r?r.end:0,a.end=a.start+a.delay+a.duration+a.endDelay,a.easing=v(a.easing,a.duration),a.isPath=i.pth(o),a.isColor=i.col(a.from.original),a.isColor&&(a.round=1),r=a,a})}var G={css:function(n,e,r){return n.style[e]=r},attribute:function(n,e,r){return n.setAttribute(e,r)},object:function(n,e,r){return n[e]=r},transform:function(n,e,r,t,a){if(t.list.set(e,r),e===t.last||a){var o="";t.list.forEach(function(n,e){o+=e+"("+n+") "}),n.style.transform=o}}};function R(n,e){Q(n).forEach(function(n){for(var r in e){var t=B(e[r],n),a=n.target,o=C(t),u=N(a,r,o,n),i=A(L(t,o||C(u)),u),c=D(a,r);G[c](a,r,i,n.transforms,!0)}})}function W(n,e){return m(y(n.map(function(n){return e.map(function(e){return function(n,e){var r=D(n.target,e.name);if(r){var t=H(e,n),a=t[t.length-1];return{type:r,property:e.name,animatable:n,tweens:t,duration:a.end,delay:t[0].delay,endDelay:a.endDelay}}}(n,e)})})),function(n){return!i.und(n)})}function J(n,e){var r=n.length,t=function(n){return n.timelineOffset?n.timelineOffset:0},a={};return a.duration=r?Math.max.apply(Math,n.map(function(n){return t(n)+n.duration})):e.duration,a.delay=r?Math.min.apply(Math,n.map(function(n){return t(n)+n.delay})):e.delay,a.endDelay=r?a.duration-Math.max.apply(Math,n.map(function(n){return t(n)+n.duration-n.endDelay})):e.endDelay,a}var K=0;var U,_=[],nn=[],en=function(){function n(){U=requestAnimationFrame(e)}function e(e){var r=_.length;if(r){for(var t=0;t<r;){var a=_[t];if(a.paused){var o=_.indexOf(a);o>-1&&(_.splice(o,1),r=_.length)}else a.tick(e);t++}n()}else U=cancelAnimationFrame(U)}return n}();function rn(r){void 0===r&&(r={});var t,o=0,u=0,i=0,c=0,s=null;function f(n){var e=window.Promise&&new Promise(function(n){return s=n});return n.finished=e,e}var l,d,p,h,v,g,y,b,M=(d=w(n,l=r),p=w(e,l),h=z(p,l),v=Q(l.targets),g=W(v,h),y=J(g,p),b=K,K++,k(d,{id:b,children:[],animatables:v,animations:g,duration:y.duration,delay:y.delay,endDelay:y.endDelay}));f(M);function x(){var n=M.direction;"alternate"!==n&&(M.direction="normal"!==n?"normal":"reverse"),M.reversed=!M.reversed,t.forEach(function(n){return n.reversed=M.reversed})}function O(n){return M.reversed?M.duration-n:n}function C(){o=0,u=O(M.currentTime)*(1/rn.speed)}function B(n,e){e&&e.seek(n-e.timelineOffset)}function P(n){for(var e=0,r=M.animations,t=r.length;e<t;){var o=r[e],u=o.animatable,i=o.tweens,c=i.length-1,s=i[c];c&&(s=m(i,function(e){return n<e.end})[0]||s);for(var f=a(n-s.start-s.delay,0,s.duration)/s.duration,l=isNaN(f)?1:s.easing(f),d=s.to.strings,p=s.round,h=[],v=s.to.numbers.length,g=void 0,y=0;y<v;y++){var b=void 0,x=s.to.numbers[y],w=s.from.numbers[y]||0;b=s.isPath?X(s.value,l*x):w+l*(x-w),p&&(s.isColor&&y>2||(b=Math.round(b*p)/p)),h.push(b)}var k=d.length;if(k){g=d[0];for(var O=0;O<k;O++){d[O];var C=d[O+1],B=h[O];isNaN(B)||(g+=C?B+C:B+" ")}}else g=h[0];G[o.type](u.target,o.property,g,u.transforms),o.currentValue=g,e++}}function I(n){M[n]&&!M.passThrough&&M[n](M)}function T(n){var e=M.duration,r=M.delay,l=e-M.endDelay,d=O(n);M.progress=a(d/e*100,0,100),M.reversePlayback=d<M.currentTime,t&&function(n){if(M.reversePlayback)for(var e=c;e--;)B(n,t[e]);else for(var r=0;r<c;r++)B(n,t[r])}(d),!M.began&&M.currentTime>0&&(M.began=!0,I("begin")),!M.loopBegan&&M.currentTime>0&&(M.loopBegan=!0,I("loopBegin")),d<=r&&0!==M.currentTime&&P(0),(d>=l&&M.currentTime!==e||!e)&&P(e),d>r&&d<l?(M.changeBegan||(M.changeBegan=!0,M.changeCompleted=!1,I("changeBegin")),I("change"),P(d)):M.changeBegan&&(M.changeCompleted=!0,M.changeBegan=!1,I("changeComplete")),M.currentTime=a(d,0,e),M.began&&I("update"),n>=e&&(u=0,M.remaining&&!0!==M.remaining&&M.remaining--,M.remaining?(o=i,I("loopComplete"),M.loopBegan=!1,"alternate"===M.direction&&x()):(M.paused=!0,M.completed||(M.completed=!0,I("loopComplete"),I("complete"),!M.passThrough&&"Promise"in window&&(s(),f(M)))))}return M.reset=function(){var n=M.direction;M.passThrough=!1,M.currentTime=0,M.progress=0,M.paused=!0,M.began=!1,M.loopBegan=!1,M.changeBegan=!1,M.completed=!1,M.changeCompleted=!1,M.reversePlayback=!1,M.reversed="reverse"===n,M.remaining=M.loop,t=M.children;for(var e=c=t.length;e--;)M.children[e].reset();(M.reversed&&!0!==M.loop||"alternate"===n&&1===M.loop)&&M.remaining++,P(M.reversed?M.duration:0)},M.set=function(n,e){return R(n,e),M},M.tick=function(n){i=n,o||(o=i),T((i+(u-o))*rn.speed)},M.seek=function(n){T(O(n))},M.pause=function(){M.paused=!0,C()},M.play=function(){M.paused&&(M.completed&&M.reset(),M.paused=!1,_.push(M),C(),U||en())},M.reverse=function(){x(),C()},M.restart=function(){M.reset(),M.play()},M.reset(),M.autoplay&&M.play(),M}function tn(n,e){for(var r=e.length;r--;)M(n,e[r].animatable.target)&&e.splice(r,1)}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",function(){document.hidden?(_.forEach(function(n){return n.pause()}),nn=_.slice(0),rn.running=_=[]):nn.forEach(function(n){return n.play()})}),rn.version="3.1.0",rn.speed=1,rn.running=_,rn.remove=function(n){for(var e=Z(n),r=_.length;r--;){var t=_[r],a=t.animations,o=t.children;tn(e,a);for(var u=o.length;u--;){var i=o[u],c=i.animations;tn(e,c),c.length||i.children.length||o.splice(u,1)}a.length||o.length||t.pause()}},rn.get=N,rn.set=R,rn.convertPx=I,rn.path=function(n,e){var r=i.str(n)?g(n)[0]:n,t=e||100;return function(n){return{property:n,el:r,svg:$(r),totalLength:q(r)*(t/100)}}},rn.setDashoffset=function(n){var e=q(n);return n.setAttribute("stroke-dasharray",e),e},rn.stagger=function(n,e){void 0===e&&(e={});var r=e.direction||"normal",t=e.easing?v(e.easing):null,a=e.grid,o=e.axis,u=e.from||0,c="first"===u,s="center"===u,f="last"===u,l=i.arr(n),d=l?parseFloat(n[0]):parseFloat(n),p=l?parseFloat(n[1]):0,h=C(l?n[1]:n)||0,g=e.start||0+(l?d:0),m=[],y=0;return function(n,e,i){if(c&&(u=0),s&&(u=(i-1)/2),f&&(u=i-1),!m.length){for(var v=0;v<i;v++){if(a){var b=s?(a[0]-1)/2:u%a[0],M=s?(a[1]-1)/2:Math.floor(u/a[0]),x=b-v%a[0],w=M-Math.floor(v/a[0]),k=Math.sqrt(x*x+w*w);"x"===o&&(k=-x),"y"===o&&(k=-w),m.push(k)}else m.push(Math.abs(u-v));y=Math.max.apply(Math,m)}t&&(m=m.map(function(n){return t(n/y)*y})),"reverse"===r&&(m=m.map(function(n){return o?n<0?-1*n:-n:Math.abs(y-n)}))}return g+(l?(p-d)/y:d)*(Math.round(100*m[e])/100)+h}},rn.timeline=function(n){void 0===n&&(n={});var r=rn(n);return r.duration=0,r.add=function(t,a){var o=_.indexOf(r),u=r.children;function c(n){n.passThrough=!0}o>-1&&_.splice(o,1);for(var s=0;s<u.length;s++)c(u[s]);var f=k(t,w(e,n));f.targets=f.targets||n.targets;var l=r.duration;f.autoplay=!1,f.direction=r.direction,f.timelineOffset=i.und(a)?l:A(a,l),c(r),r.seek(f.timelineOffset);var d=rn(f);c(d),u.push(d);var p=J(u,n);return r.delay=p.delay,r.endDelay=p.endDelay,r.duration=p.duration,r.seek(0),r.reset(),r.autoplay&&r.play(),r},r},rn.easing=v,rn.penner=h,rn.random=function(n,e){return Math.floor(Math.random()*(e-n+1))+n},rn});
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d5eff372..5249dcf5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1241,7 +1241,7 @@ function timeline(params = {}) {
   return tl;
 }
 
-anime.version = '3.0.1';
+anime.version = '3.1.0';
 anime.speed = 1;
 anime.running = activeInstances;
 anime.remove = removeTargets;

From 3a382f860165af6711585c2ef9aeab9f04aee7d0 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 16:42:18 +0200
Subject: [PATCH 33/34] Update readme ES6 module instal path #588, #527, #590

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 11ac71a8..2504499b 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ or manual [download](https://github.com/juliangarnier/anime/archive/master.zip).
 #### ES6 modules
 
 ```javascript
-import anime from 'anime';
+import anime from 'animejs/lib/anime.es.js';
 ```
 
 #### CommonJS

From a2d28ac6f8d6e6e180c9ab97441fb640c1cd7c70 Mon Sep 17 00:00:00 2001
From: Julian Garnier <julian.garnier@gmail.com>
Date: Thu, 25 Jul 2019 17:21:46 +0200
Subject: [PATCH 34/34] Update animated easings demo

---
 .../examples/anime-staggered-easing-demo.html | 48 ++++++++++++++++---
 1 file changed, 42 insertions(+), 6 deletions(-)

diff --git a/documentation/examples/anime-staggered-easing-demo.html b/documentation/examples/anime-staggered-easing-demo.html
index 0056c7d1..b3e77d64 100644
--- a/documentation/examples/anime-staggered-easing-demo.html
+++ b/documentation/examples/anime-staggered-easing-demo.html
@@ -64,23 +64,59 @@
 
   easingVisualizerEl.appendChild(fragment);
 
+  var easings = [
+    "easeInSine",
+    "easeOutSine",
+    "easeInOutSine",
+    "easeInCirc",
+    "easeOutCirc",
+    "easeInOutCirc",
+    "easeInBack",
+    "easeOutBack",
+    "easeInOutBack",
+    "easeInBounce",
+    "easeOutBounce",
+    "easeInOutBounce",
+    "easeInElastic",
+    "easeOutElastic",
+    "easeInOutElastic",
+    "easeInQuad",
+    "easeOutQuad",
+    "easeInOutQuad",
+    "easeInCubic",
+    "easeOutCubic",
+    "easeInOutCubic",
+    "easeInQuart",
+    "easeOutQuart",
+    "easeInOutQuart",
+    "easeInQuint",
+    "easeOutQuint",
+    "easeInOutQuint",
+    "easeInExpo",
+    "easeOutExpo",
+    "easeInOutExpo",
+    "linear"
+  ]
+
+  anime.set('.easing-visualizer div', {
+    translateY: anime.stagger([0, -400], {easing: 'linear'})
+  })
+
   anime({
     targets: '.easing-visualizer div',
-    translateZ: 0,
     translateY: (() => {
       const keyframes = [];
-      keyframes.push(anime.penner['linear']);
-      for (let ease in anime.penner) {
+      easings.forEach(function(ease) {
         keyframes.push({
           value: anime.stagger([0, -400], {easing: ease}),
           delay: anime.stagger(.125)
         });
-      };
-      keyframes.push(anime.penner['linear']);
+      })
       return keyframes;
     })(),
+    translateZ: 0,
     easing: 'easeInOutSine',
-    duration: 6000,
+    duration: 9000,
     loop: true
   });