diff --git a/.eslintrc b/.eslintrc
index 092689a..31039dd 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -23,18 +23,19 @@
// Disable no-restricted-globals for global objects
"no-restricted-globals": 0,
// Disable no-params-reassign for properties
- "no-param-reassign": ["error", { "props": false }],
+ // "no-param-reassign": ["error", { "props": false }],
// Allow strict mode (we are not dealing with modules)
- "strict": [0],
- // Disable bitwise
- "no-bitwise": 0,
- // Allow use of "private methods"
- "no-underscore-dangle": 0,
+ // "strict": [0],
+ // Allow use of "private methods" - impossible to satisfy
+ "no-underscore-dangle": 0
// Disable alert rule till we have a CE in place
- "no-alert": 0,
+ // "no-alert": 0
// Allow extensions on imports
- "import/extensions": 0,
+ // "import/extensions": 0,
// Allow exporting mutable 'let' binding
- "import/no-mutable-exports": 0
+ // "import/no-mutable-exports": 0,
+ // Allow no named as default / member
+ // "import/no-named-as-default": 0,
+ // "import/no-named-as-default-member": 0
}
}
diff --git a/.gitignore b/.gitignore
index 1681d2b..b6d5063 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
node_modules/
+experiments/
.npmignore
package-lock.json
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
index 7eef8b8..de05e63 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,4 +1,5 @@
node_modules/
demo/
+experiments/
package-lock.json
.gitignore
\ No newline at end of file
diff --git a/README.md b/README.md
index 4fc1293..90c2187 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
# KUTE.js
-A modern JavaScript animation engine built on ES6+ standards with most essential features for the web, delivering easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size.
+A modern JavaScript animation engine built on ES6+ standards with strong TypeScript definitions and most essential features for the web with easy to use methods to set up high performance, cross-browser animations. The focus is code quality, flexibility, performance and size.
[![NPM Version](https://img.shields.io/npm/v/kute.js.svg?style=flat-square)](https://www.npmjs.com/package/kute.js)
[![NPM Downloads](https://img.shields.io/npm/dm/kute.js.svg?style=flat-square)](http://npm-stat.com/charts.html?package=kute.js)
@@ -42,22 +42,10 @@ All above mentioned components have a BASE version which doesn't include value p
For a complete developer guide, usage and stuff like npm, visit [the wiki](https://github.com/thednp/kute.js/wiki).
-# ESLint
-If you include KUTE.js in your project, we recommend using the following ESLint rule:
-
-```js
-rules: {
- // Disable bitwise for isArcCommand & isPathCommand from SVGPathCommander
- // as well as the KUTE.js interpolation functions
- "no-bitwise": 0,
-}
-```
-Some **SVGPathCommander** as well as **KUTE.js** interpolation functions make use of `|` (OR) and `>>` operators for fastest number operations.
-
-
# Browser Support
KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy browsers might some help, so give them a small polyfill set with most essential features required by KUTE.js to work, powered by [minifill](https://github.com/thednp/minifill), try it. For broader projects you might want to consider polyfills.
+
# Special Thanks
* [Mike Bostock](https://bost.ocks.org/mike/) for his awesome [D3.js](https://github.com/d3/d3), one of the sources for our reworked [SVGMorph](http://thednp.github.io/kute.js/svgMorph.html) component.
* [Noah Veltman](https://github.com/veltman) for his awesome [flubber](https://github.com/veltman/flubber), another one of the sources for the SVGMorph component.
@@ -65,8 +53,10 @@ KUTE.js is redeveloped for maximum performance on modern browsers. Some legacy b
* [Dmitry Baranovskiy](https://dmitry.baranovskiy.com/) for his awesome [Raphael.js](https://dmitrybaranovskiy.github.io/raphael/), another source for our SVGCubicMorph component.
* [@dalisoft](https://github.com/dalisoft) contributed a great deal to the performance and functionality of previous versions of KUTE.js.
+
# Contributions
* [Contributors & Collaborators](https://github.com/thednp/kute.js/graphs/contributors)
+
# License
[MIT License](https://github.com/thednp/kute.js/blob/master/LICENSE)
diff --git a/demo/assets/js/perf-matrix.js b/demo/assets/js/perf-matrix.js
index db0d576..b4fcbb5 100644
--- a/demo/assets/js/perf-matrix.js
+++ b/demo/assets/js/perf-matrix.js
@@ -78,18 +78,18 @@ function complete(){
container.style.display = 'none';
}
-var engine = document.getElementById('kute'),
- fromCSS = { rotate3d: [ 0, 0,0 ], perspective:600 },
- fromMX = { transform: { rotate3d: [ 0, 0,0 ], perspective:600 }},
- toCSS = { rotate3d: [ 360,0,0 ], perspective:600 },
- toMX = { transform: { rotate3d: [ 0,360,0 ], perspective:600 }},
- ops = { duration: 2000, repeat: 5 }
+var engine = document.getElementById('kute'),
+ fromCSS = { rotate3d: [ 0, 0,0 ], perspective:600 },
+ fromMX = { transform: { rotate3d: [ 0, 0,0 ], perspective:600 }},
+ toCSS = { rotate3d: [ 360,0,0 ], perspective:600 },
+ toMX = { transform: { rotate3d: [ 0,360,0 ], perspective:600 }},
+ ops = { duration: 2000, repeat: 5 }
// since our engines don't do sync, we make it our own here
-if (engine.src.indexOf('kute.min.js')>-1) {
+if (!engine.src.includes('extra')) {
[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromCSS,toCSS,ops) ) })
}
-if (engine.src.indexOf('kute-extra.min.js')>-1) {
+if (engine.src.includes('extra')) {
[].slice.call(collection).map((el,i) => { i===lastIdx && (ops.onComplete = complete); tws.push ( KUTE.fromTo(el,fromMX,toMX,ops) ) })
}
@@ -98,15 +98,13 @@ function startTest(){
infoContainer.style.display = 'none';
container.style.display = 'block'
- !tws[0].playing && startKUTE();
+ tws.length && !tws[0].playing && startKUTE();
}
function startKUTE() {
var now = window.performance.now(), count = tws.length;
- for (var t=0; t t.start(now));
}
// the start button handle
diff --git a/demo/assets/js/svgCubicMorph.js b/demo/assets/js/svgCubicMorph.js
index bbc9c05..2cf674e 100644
--- a/demo/assets/js/svgCubicMorph.js
+++ b/demo/assets/js/svgCubicMorph.js
@@ -5,28 +5,22 @@ var morphOps = {
// basic morph
var morphTween = KUTE.to('#rectangle', { path: '#star' }, morphOps);
-var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, morphOps);
var morphTween2 = KUTE.to('#rectangle2', { path: '#star2' }, morphOps);
var morphBtn = document.getElementById('morphBtn');
morphBtn.addEventListener('click', function(){
!morphTween.playing && morphTween.start();
- !morphTween1.playing && morphTween1.start();
!morphTween2.playing && morphTween2.start();
}, false);
// line to circle
var lineMorph = KUTE.to('#line' ,{path:'#circle' }, morphOps);
var lineMorph1 = KUTE.to('#line1',{path:'#circle1'}, morphOps);
-var lineMorph2 = KUTE.to('#line2',{path:'#circle2'}, morphOps);
-var lineMorph3 = KUTE.to('#line3',{path:'#circle3'}, morphOps);
-var morphBtnClosed = document.getElementById('morphBtnClosed')
+var morphBtnClosed = document.getElementById('morphBtnClosed')
morphBtnClosed.addEventListener('click', function(){
!lineMorph.playing && lineMorph.start();
!lineMorph1.playing && lineMorph1.start();
- !lineMorph2.playing && lineMorph2.start();
- !lineMorph3.playing && lineMorph3.start();
}, false);
var morphOps1 = {
@@ -63,19 +57,14 @@ var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'}, { path:
var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'}, { path: '#mouth' }, morphOps1);
var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'}, { path: '#eye-right' }, morphOps1);
-var compliMorph11 = KUTE.fromTo('#rectangle-container1', {path: '#rectangle-container1', attr:{ fill: "#9C27B0"} }, { path: '#circle-container1', attr:{ fill: "#FF5722"} }, morphOps1);
-var compliMorph21 = KUTE.fromTo('#symbol-left1', {path: '#symbol-left1'}, { path: '#eye-left1' }, morphOps1);
-var compliMorph31 = KUTE.fromTo('#symbol-left-clone1', {path: '#symbol-left-clone1'}, { path: '#mouth1' }, morphOps1);
-var compliMorph41 = KUTE.fromTo('#symbol-right1', {path: '#symbol-right1'}, { path: '#eye-right1' }, morphOps1);
-
var compliMorph12 = KUTE.fromTo('#rectangle-container2', {path: '#rectangle-container2', attr:{ fill: "#e91b1f"} }, { path: '#circle-container2', attr:{ fill: "#FF5722"} }, morphOps1);
var compliMorph22 = KUTE.fromTo('#symbol-left2', {path: '#symbol-left2'}, { path: '#eye-left2' }, morphOps1);
var compliMorph32 = KUTE.fromTo('#sample-shape2', {path: '#sample-shape2'}, { path: '#mouth2' }, morphOps1);
var compliMorph42 = KUTE.fromTo('#symbol-right2', {path: '#symbol-right2'}, { path: '#eye-right2' }, morphOps1);
compliMorphBtn.addEventListener('click', function(){
- !compliMorph1.playing && compliMorph1.start() && compliMorph11.start() && compliMorph12.start();
- !compliMorph2.playing && compliMorph2.start() && compliMorph21.start() && compliMorph22.start();
- !compliMorph3.playing && compliMorph3.start() && compliMorph31.start() && compliMorph32.start();
- !compliMorph4.playing && compliMorph4.start() && compliMorph41.start() && compliMorph42.start();
+ !compliMorph1.playing && compliMorph1.start() && compliMorph12.start();
+ !compliMorph2.playing && compliMorph2.start() && compliMorph22.start();
+ !compliMorph3.playing && compliMorph3.start() && compliMorph32.start();
+ !compliMorph4.playing && compliMorph4.start() && compliMorph42.start();
}, false);
\ No newline at end of file
diff --git a/demo/performance-matrix.html b/demo/performance-matrix.html
index 59271ce..5448109 100644
--- a/demo/performance-matrix.html
+++ b/demo/performance-matrix.html
@@ -203,7 +203,9 @@
+
+