deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Update demo

Browse source
This commit is contained in:
thednp 2021-12-08 23:48:42 +02:00
parent fd8d4ba7c8
commit 19f9df8a93
11 changed files with 2284 additions and 1004 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,3 +1,4 @@
node_modules
package-lock.json
experiments

22
assets/js/perf-matrix.js
View file

@ -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<count; t++){
tws[t].start(now)
}
tws.forEach((t) => t.start(now));
}
// the start button handle

21
assets/js/svgCubicMorph.js
View file

@ -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);

2
performance-matrix.html
View file

@ -203,7 +203,9 @@
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<!-- <script src="../experiments/CSSMatrix.js"></script> -->
<script id="kute" src="./src/kute-extra.min.js"></script>
<!-- <script id="kute" src="./src/kute-extra.js"></script> -->
<script src="./assets/js/perf-matrix.js"></script>
</body>

391
src/kute-base.js
View file

@ -1,5 +1,5 @@
/*!
* KUTE.js Base v2.1.3 (http://thednp.github.io/kute.js)
* KUTE.js Base v2.2.0alpha2 (http://thednp.github.io/kute.js)
* Copyright 2015-2021 © thednp
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
*/
@ -9,21 +9,24 @@
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.KUTE = factory());
})(this, (function () { 'use strict';
var KUTE = {};
/**
* The KUTE.js Execution Context
*/
var KEC = {};
var Tweens = [];
var globalObject;
var gl0bal;
if (typeof global !== 'undefined') { globalObject = global; }
else if (typeof window !== 'undefined') { globalObject = window.self; }
else { globalObject = {}; }
if (typeof global !== 'undefined') { gl0bal = global; }
else if (typeof window !== 'undefined') { gl0bal = window.self; }
else { gl0bal = {}; }
var globalObject$1 = globalObject;
var globalObject = gl0bal;
// KUTE.js INTERPOLATE FUNCTIONS
// =============================
var Interpolate = {};
var interpolate = {};
// schedule property specific function on animation start
// link property update function to KUTE.js execution context
@ -31,13 +34,13 @@
// Include a performance.now polyfill.
// source https://github.com/tweenjs/tween.js/blob/master/src/Now.ts
var now;
var performanceNow;
// In node.js, use process.hrtime.
// eslint-disable-next-line
// @ts-ignore
if (typeof self === 'undefined' && typeof process !== 'undefined' && process.hrtime) {
now = function () {
performanceNow = function () {
// eslint-disable-next-line
// @ts-ignore
var time = process.hrtime();
@ -49,24 +52,27 @@
// In a browser, use self.performance.now if it is available.
// This must be bound, because directly assigning this function
// leads to an invocation exception in Chrome.
now = self.performance.now.bind(self.performance);
performanceNow = self.performance.now.bind(self.performance);
} else if (typeof Date !== 'undefined' && Date.now) {
// Use Date.now if it is available.
now = Date.now;
performanceNow = Date.now;
} else {
// Otherwise, use 'new Date().getTime()'.
now = function () { return new Date().getTime(); };
performanceNow = function () { return new Date().getTime(); };
}
var now$1 = now;
var now = performanceNow;
var Time = {};
Time.now = now$1;
// const that = window.self || window || {};
// Time.now = that.performance.now.bind(that.performance);
Time.now = now;
// eslint-disable-next-line import/no-mutable-exports -- impossible to satisfy
var Tick = 0;
/**
*
* @param {number | Date} time
*/
var Ticker = function (time) {
var i = 0;
while (i < Tweens.length) {
@ -87,38 +93,43 @@
Tick = null;
Object.keys(onStart).forEach(function (obj) {
if (typeof (onStart[obj]) === 'function') {
if (KUTE[obj]) { delete KUTE[obj]; }
if (KEC[obj]) { delete KEC[obj]; }
} else {
Object.keys(onStart[obj]).forEach(function (prop) {
if (KUTE[prop]) { delete KUTE[prop]; }
if (KEC[prop]) { delete KEC[prop]; }
});
}
});
Object.keys(Interpolate).forEach(function (i) {
if (KUTE[i]) { delete KUTE[i]; }
Object.keys(interpolate).forEach(function (i) {
if (KEC[i]) { delete KEC[i]; }
});
}
}, 64);
}
// KUTE.js render update functions
// ===============================
// render update functions
// =======================
var Render = {
Tick: Tick, Ticker: Ticker, Tweens: Tweens, Time: Time,
};
Object.keys(Render).forEach(function (blob) {
if (!KUTE[blob]) {
KUTE[blob] = blob === 'Time' ? Time.now : Render[blob];
if (!KEC[blob]) {
KEC[blob] = blob === 'Time' ? Time.now : Render[blob];
}
});
globalObject$1._KUTE = KUTE;
globalObject._KUTE = KEC;
var defaultOptions = {
duration: 700,
delay: 0,
easing: 'linear',
repeat: 0,
repeatDelay: 0,
yoyo: false,
resetStart: false,
offset: 0,
};
// link properties to interpolate functions
@ -138,30 +149,46 @@
var Util = {};
var connect = {};
/** @type {KUTE.TweenBase | KUTE.Tween | KUTE.TweenExtra} */
connect.tween = null;
connect.processEasing = null;
// Select Robert Penner's Easing Functions
// updated for ESLint
var Easing = {
/** @type {KUTE.easingFunction} */
linear: function (t) { return t; },
/** @type {KUTE.easingFunction} */
easingQuadraticIn: function (t) { return t * t; },
/** @type {KUTE.easingFunction} */
easingQuadraticOut: function (t) { return t * (2 - t); },
/** @type {KUTE.easingFunction} */
easingQuadraticInOut: function (t) { return (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t); },
/** @type {KUTE.easingFunction} */
easingCubicIn: function (t) { return t * t * t; },
/** @type {KUTE.easingFunction} */
easingCubicOut: function (t0) { var t = t0 - 1; return t * t * t + 1; },
/** @type {KUTE.easingFunction} */
easingCubicInOut: function (t) { return (t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1); },
/** @type {KUTE.easingFunction} */
easingCircularIn: function (t) { return -(Math.sqrt(1 - (t * t)) - 1); },
/** @type {KUTE.easingFunction} */
easingCircularOut: function (t0) { var t = t0 - 1; return Math.sqrt(1 - t * t); },
/** @type {KUTE.easingFunction} */
easingCircularInOut: function (t0) {
var t = t0 * 2;
if (t < 1) { return -0.5 * (Math.sqrt(1 - t * t) - 1); }
t -= 2; return 0.5 * (Math.sqrt(1 - t * t) + 1);
},
/** @type {KUTE.easingFunction} */
easingBackIn: function (t) { var s = 1.70158; return t * t * ((s + 1) * t - s); },
/** @type {KUTE.easingFunction} */
easingBackOut: function (t0) {
var s = 1.70158;
var t = t0 - 1;
return t * t * ((s + 1) * t + s) + 1;
},
/** @type {KUTE.easingFunction} */
easingBackInOut: function (t0) {
var s = 1.70158 * 1.525;
var t = t0 * 2;
@ -170,6 +197,12 @@
},
};
/**
* Returns a valid `easingFunction`.
*
* @param {KUTE.easingFunction | string} fn function name or constructor name
* @returns {KUTE.easingFunction} a valid easing function
*/
function processEasing(fn) {
if (typeof fn === 'function') {
return fn;
@ -181,19 +214,42 @@
connect.processEasing = processEasing;
function add (tw) { return Tweens.push(tw); }
/**
* KUTE.add(Tween)
*
* @param {KUTE.Tween} tw a new tween to add
*/
var add = function (tw) { return Tweens.push(tw); };
function remove (tw) {
/**
* KUTE.remove(Tween)
*
* @param {KUTE.Tween} tw a new tween to add
*/
var remove = function (tw) {
var i = Tweens.indexOf(tw);
if (i !== -1) { Tweens.splice(i, 1); }
}
};
function getAll () { return Tweens; }
/**
* KUTE.add(Tween)
*
* @return {KUTE.Tween[]} tw a new tween to add
*/
var getAll = function () { return Tweens; };
function removeAll () { Tweens.length = 0; }
/**
* KUTE.removeAll()
*/
var removeAll = function () { Tweens.length = 0; };
// all supported properties
var supportedProperties = {};
/**
* linkInterpolation
* @this {KUTE.Tween}
*/
function linkInterpolation() {
var this$1$1 = this;
// DON'T change
@ -205,18 +261,18 @@
if (typeof (componentLink[fnObj]) === 'function' // ATTR, colors, scroll, boxModel, borderRadius
&& Object.keys(this$1$1.valuesEnd).some(function (i) { return (componentProps && componentProps.includes(i))
|| (i === 'attr' && Object.keys(this$1$1.valuesEnd[i]).some(function (j) { return componentProps && componentProps.includes(j); })); })) {
if (!KUTE[fnObj]) { KUTE[fnObj] = componentLink[fnObj]; }
if (!KEC[fnObj]) { KEC[fnObj] = componentLink[fnObj]; }
} else {
Object.keys(this$1$1.valuesEnd).forEach(function (prop) {
var propObject = this$1$1.valuesEnd[prop];
if (propObject instanceof Object) {
Object.keys(propObject).forEach(function (i) {
if (typeof (componentLink[i]) === 'function') { // transformCSS3
if (!KUTE[i]) { KUTE[i] = componentLink[i]; }
if (!KEC[i]) { KEC[i] = componentLink[i]; }
} else {
Object.keys(componentLink[fnObj]).forEach(function (j) {
if (componentLink[i] && typeof (componentLink[i][j]) === 'function') { // transformMatrix
if (!KUTE[j]) { KUTE[j] = componentLink[i][j]; }
if (!KEC[j]) { KEC[j] = componentLink[i][j]; }
}
});
}
@ -228,7 +284,7 @@
});
}
var Internals = {
var internals = {
add: add,
remove: remove,
getAll: getAll,
@ -237,7 +293,15 @@
linkInterpolation: linkInterpolation,
};
// a public selector utility
/**
* selector
*
* A selector utility for KUTE.js.
*
* @param {KUTE.selectorType} el target(s) or string selector
* @param {boolean | number} multi when true returns an array/collection of elements
* @returns {Element | Element[] | null}
*/
function selector(el, multi) {
try {
var requestedElem;
@ -256,12 +320,17 @@
}
}
// Animation class
/**
* Animation Base Class
*
* Registers components by populating KUTE.js objects and makes sure
* no duplicate component / property is allowed.
*
* This class only registers the minimal amount of component information
* required to enable components animation, which means value processing
* as well as `to()` and `allTo()` methods are not supported.
*/
var AnimationBase = function AnimationBase(Component) {
return this.setComponent(Component);
};
AnimationBase.prototype.setComponent = function setComponent (Component) {
var ComponentName = Component.component;
// const Objects = { defaultValues, defaultOptions, Interpolate, linkProperty }
var Functions = { onStart: onStart, onComplete: onComplete };
@ -276,9 +345,10 @@
// set additional options
if (Component.defaultOptions) {
Object.keys(Component.defaultOptions).forEach(function (op) {
defaultOptions[op] = Component.defaultOptions[op];
});
// Object.keys(Component.defaultOptions).forEach((op) => {
// defaultOptions[op] = Component.defaultOptions[op];
// });
Object.assign(defaultOptions, Component.defaultOptions);
}
// set functions
@ -310,12 +380,12 @@
if (Component.Interpolate) {
Object.keys(Component.Interpolate).forEach(function (fni) {
var compIntObj = Component.Interpolate[fni];
if (typeof (compIntObj) === 'function' && !Interpolate[fni]) {
Interpolate[fni] = compIntObj;
if (typeof (compIntObj) === 'function' && !interpolate[fni]) {
interpolate[fni] = compIntObj;
} else {
Object.keys(compIntObj).forEach(function (sfn) {
if (typeof (compIntObj[sfn]) === 'function' && !Interpolate[fni]) {
Interpolate[fni] = compIntObj[sfn];
if (typeof (compIntObj[sfn]) === 'function' && !interpolate[fni]) {
interpolate[fni] = compIntObj[sfn];
}
});
}
@ -334,62 +404,132 @@
return { name: ComponentName };
};
/**
* Perspective Interpolation Function.
*
* @param {number} a start value
* @param {number} b end value
* @param {string} u unit
* @param {number} v progress
* @returns {string} the perspective function in string format
*/
function perspective(a, b, u, v) {
// eslint-disable-next-line no-bitwise
return ("perspective(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")");
}
/**
* Translate 3D Interpolation Function.
*
* @param {number[]} a start [x,y,z] position
* @param {number[]} b end [x,y,z] position
* @param {string} u unit, usually `px` degrees
* @param {number} v progress
* @returns {string} the interpolated 3D translation string
*/
function translate3d(a, b, u, v) {
var translateArray = [];
for (var ax = 0; ax < 3; ax += 1) {
translateArray[ax] = (a[ax] || b[ax]
// eslint-disable-next-line no-bitwise
? ((a[ax] + (b[ax] - a[ax]) * v) * 1000 >> 0) / 1000 : 0) + u;
}
return ("translate3d(" + (translateArray.join(',')) + ")");
}
/**
* 3D Rotation Interpolation Function.
*
* @param {number} a start [x,y,z] angles
* @param {number} b end [x,y,z] angles
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated 3D rotation string
*/
function rotate3d(a, b, u, v) {
var rotateStr = '';
// eslint-disable-next-line no-bitwise
rotateStr += a[0] || b[0] ? ("rotateX(" + (((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u + ")") : '';
// eslint-disable-next-line no-bitwise
rotateStr += a[1] || b[1] ? ("rotateY(" + (((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u + ")") : '';
// eslint-disable-next-line no-bitwise
rotateStr += a[2] || b[2] ? ("rotateZ(" + (((a[2] + (b[2] - a[2]) * v) * 1000 >> 0) / 1000) + u + ")") : '';
return rotateStr;
}
/**
* Translate 2D Interpolation Function.
*
* @param {number[]} a start [x,y] position
* @param {number[]} b end [x,y] position
* @param {string} u unit, usually `px` degrees
* @param {number} v progress
* @returns {string} the interpolated 2D translation string
*/
function translate(a, b, u, v) {
var translateArray = [];
// eslint-disable-next-line no-bitwise
translateArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u;
// eslint-disable-next-line no-bitwise
translateArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0';
return ("translate(" + (translateArray.join(',')) + ")");
}
/**
* 2D Rotation Interpolation Function.
*
* @param {number} a start angle
* @param {number} b end angle
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated rotation
*/
function rotate(a, b, u, v) {
// eslint-disable-next-line no-bitwise
return ("rotate(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + u + ")");
}
/**
* Scale Interpolation Function.
*
* @param {number} a start scale
* @param {number} b end scale
* @param {number} v progress
* @returns {string} the interpolated scale
*/
function scale(a, b, v) {
// eslint-disable-next-line no-bitwise
return ("scale(" + (((a + (b - a) * v) * 1000 >> 0) / 1000) + ")");
}
/**
* Skew Interpolation Function.
*
* @param {number} a start {x,y} angles
* @param {number} b end {x,y} angles
* @param {string} u unit, usually `deg` degrees
* @param {number} v progress
* @returns {string} the interpolated string value of skew(s)
*/
function skew(a, b, u, v) {
var skewArray = [];
// eslint-disable-next-line no-bitwise
skewArray[0] = (a[0] === b[0] ? b[0] : ((a[0] + (b[0] - a[0]) * v) * 1000 >> 0) / 1000) + u;
// eslint-disable-next-line no-bitwise
skewArray[1] = a[1] || b[1] ? ((a[1] === b[1] ? b[1] : ((a[1] + (b[1] - a[1]) * v) * 1000 >> 0) / 1000) + u) : '0';
return ("skew(" + (skewArray.join(',')) + ")");
}
/* transformFunctions = {
property: 'transform',
subProperties,
defaultValues,
Interpolate: {translate,rotate,skew,scale},
functions } */
// same to svg transform, attr
// Component Functions
/**
* Sets the property update function.
* * same to svgTransform, htmlAttributes
* @param {string} tweenProp the property name
*/
function onStartTransform(tweenProp) {
if (!KUTE[tweenProp] && this.valuesEnd[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
KEC[tweenProp] = function (elem, a, b, v) {
// eslint-disable-next-line no-param-reassign
elem.style[tweenProp] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0
+ (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z]
+ (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z]
@ -400,7 +540,7 @@
}
// Base Component
var BaseTransform = {
var TransformFunctionsBase = {
component: 'baseTransform',
property: 'transform',
functions: { onStart: onStartTransform },
@ -415,7 +555,15 @@
},
};
function numbers(a, b, v) { // number1, number2, progress
/**
* Numbers Interpolation Function.
*
* @param {number} a start value
* @param {number} b end value
* @param {number} v progress
* @returns {number} the interpolated number
*/
function numbers(a, b, v) {
var A = +a;
var B = b - a;
// a = +a; b -= a;
@ -423,12 +571,20 @@
}
// Component Functions
/**
* Sets the update function for the property.
* @param {string} tweenProp the property name
*/
function boxModelOnStart(tweenProp) {
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) {
KEC[tweenProp] = function (elem, a, b, v) {
/* eslint-disable no-param-reassign -- impossible to satisfy */
/* eslint-disable no-bitwise -- impossible to satisfy */
elem.style[tweenProp] = (v > 0.99 || v < 0.01
? ((numbers(a, b, v) * 10) >> 0) / 10
: (numbers(a, b, v)) >> 0) + "px";
/* eslint-enable no-bitwise */
/* eslint-enable no-param-reassign */
};
}
}
@ -439,7 +595,7 @@
baseBoxProps.forEach(function (x) { baseBoxOnStart[x] = boxModelOnStart; });
// Component Base
var baseBoxModel = {
var BoxModelBase = {
component: 'baseBoxModel',
category: 'boxModel',
properties: baseBoxProps,
@ -455,17 +611,23 @@
} */
// Component Functions
/**
* Sets the property update function.
* @param {string} tweenProp the property name
*/
function onStartOpacity(tweenProp/* , value */) {
// opacity could be 0 sometimes, we need to check regardless
if (tweenProp in this.valuesEnd && !KUTE[tweenProp]) {
KUTE[tweenProp] = function (elem, a, b, v) {
if (tweenProp in this.valuesEnd && !KEC[tweenProp]) {
KEC[tweenProp] = function (elem, a, b, v) {
/* eslint-disable */
elem.style[tweenProp] = ((numbers(a, b, v) * 1000) >> 0) / 1000;
/* eslint-enable */
};
}
}
// Base Component
var baseOpacity = {
var OpacityPropertyBase = {
component: 'baseOpacity',
property: 'opacity',
// defaultValue: 1,
@ -473,13 +635,13 @@
functions: { onStart: onStartOpacity },
};
// import {baseCrossBrowserMove} from '../components/crossBrowserMove.js'
// support for kute-base.js ends here
// import {baseCrossBrowserMove} from '../components/crossBrowserMove'
// support for kute-base ends here
var Components = {
Transform: new AnimationBase(BaseTransform),
BoxModel: new AnimationBase(baseBoxModel),
Opacity: new AnimationBase(baseOpacity),
Transform: new AnimationBase(TransformFunctionsBase),
BoxModel: new AnimationBase(BoxModelBase),
Opacity: new AnimationBase(OpacityPropertyBase),
};
function queueStart() {
@ -500,21 +662,28 @@
linkInterpolation.call(this);
}
// single Tween object construct
// TweenBase is meant to be use for pre-processed values
/**
* The `TweenBase` constructor creates a new `Tween` object
* for a single `HTMLElement` and returns it.
*
* `TweenBase` is meant to be used with pre-processed values.
*/
var TweenBase = function TweenBase(targetElement, startObject, endObject, opsObject) {
var this$1$1 = this;
// element animation is applied to
this.element = targetElement;
/** @type {boolean} */
this.playing = false;
/** @type {number?} */
this._startTime = null;
/** @type {boolean} */
this._startFired = false;
this.valuesEnd = endObject; // valuesEnd
this.valuesStart = startObject; // valuesStart
// type is set via KUTE.tweenProps
this.valuesEnd = endObject;
this.valuesStart = startObject;
// OPTIONS
var options = opsObject || {};
@ -522,8 +691,11 @@
// used by to() method and expects object : {} / false
this._resetStart = options.resetStart || 0;
// you can only set a core easing function as default
/** @type {KUTE.easingOption} */
this._easing = typeof (options.easing) === 'function' ? options.easing : connect.processEasing(options.easing);
/** @type {number} */
this._duration = options.duration || defaultOptions.duration; // duration option | default
/** @type {number} */
this._delay = options.delay || defaultOptions.delay; // delay option | default
// set other options
@ -542,22 +714,24 @@
var easingFnName = this._easing.name;
if (!onStart[easingFnName]) {
onStart[easingFnName] = function easingFn(prop) {
if (!KUTE[prop] && prop === this._easing.name) { KUTE[prop] = this._easing; }
if (!KEC[prop] && prop === this._easing.name) { KEC[prop] = this._easing; }
};
}
return this;
};
// tween prototype
// queue tween object to main frame update
// move functions that use the ticker outside the prototype to be in the same scope with it
/**
* Starts tweening
* @param {number?} time the tween start time
* @returns {TweenBase} this instance
*/
TweenBase.prototype.start = function start (time) {
// now it's a good time to start
add(this);
this.playing = true;
this._startTime = typeof time !== 'undefined' ? time : KUTE.Time();
this._startTime = typeof time !== 'undefined' ? time : KEC.Time();
this._startTime += this._delay;
if (!this._startFired) {
@ -574,6 +748,10 @@
return this;
};
/**
* Stops tweening
* @returns {TweenBase} this instance
*/
TweenBase.prototype.stop = function stop () {
if (this.playing) {
remove(this);
@ -587,6 +765,9 @@
return this;
};
/**
* Trigger internal completion callbacks.
*/
TweenBase.prototype.close = function close () {
var this$1$1 = this;
@ -601,20 +782,33 @@
stop.call(this);
};
/**
* Schedule another tween instance to start once this one completes.
* @param {KUTE.chainOption} args the tween animation start time
* @returns {TweenBase} this instance
*/
TweenBase.prototype.chain = function chain (args) {
this._chain = [];
this._chain = args.length ? args : this._chain.concat(args);
return this;
};
/**
* Stop tweening the chained tween instances.
*/
TweenBase.prototype.stopChainedTweens = function stopChainedTweens () {
if (this._chain && this._chain.length) { this._chain.forEach(function (tw) { return tw.stop(); }); }
};
/**
* Update the tween on each tick.
* @param {number} time the tick time
* @returns {boolean} this instance
*/
TweenBase.prototype.update = function update (time) {
var this$1$1 = this;
var T = time !== undefined ? time : KUTE.Time();
var T = time !== undefined ? time : KEC.Time();
var elapsed;
@ -628,7 +822,7 @@
// render the update
Object.keys(this.valuesEnd).forEach(function (tweenProp) {
KUTE[tweenProp](this$1$1.element,
KEC[tweenProp](this$1$1.element,
this$1$1.valuesStart[tweenProp],
this$1$1.valuesEnd[tweenProp],
progress);
@ -665,13 +859,32 @@
// Update Tween Interface
connect.tween = TweenBase;
var TweenConstructor = connect.tween;
/**
* The `KUTE.fromTo()` static method returns a new Tween object
* for a single `HTMLElement` at a given state.
*
* @param {Element} element target element
* @param {KUTE.tweenProps} startObject
* @param {KUTE.tweenProps} endObject
* @param {KUTE.tweenOptions} optionsObj tween options
* @returns {KUTE.Tween} the resulting Tween object
*/
function fromTo(element, startObject, endObject, optionsObj) {
var options = optionsObj || {};
var TweenConstructor = connect.tween;
return new TweenConstructor(selector(element), startObject, endObject, options);
}
var version = "2.1.3";
var version = "2.2.0alpha2";
// @ts-ignore
/**
* A global namespace for library version.
* @type {string}
*/
var Version = version;
var indexBase = {
Animation: AnimationBase,
@ -684,10 +897,10 @@
Easing: Easing,
Util: Util,
Render: Render,
Interpolate: Interpolate,
Internals: Internals,
Interpolate: interpolate,
Internals: internals,
Selector: selector,
Version: version,
Version: Version,
};
return indexBase;

4
src/kute-base.min.js vendored
View file

File diff suppressed because one or more lines are too long

2761
src/kute-extra.js
View file

File diff suppressed because it is too large Load diff

4
src/kute-extra.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

73
svgCubicMorph.html
View file

@ -94,9 +94,9 @@
<p>The component will process paths and out of the box will provide the closest possible interpolation by default. It also implements a series of solutions from
<a href="https://github.com/paperjs/paper.js/">Paper.js</a> to determine paths draw direction and automatically reverse one of them for most accurate presentation and as a result
the previously featured options <kbd>reverseFirstPath</kbd> and <kbd>reverseSecondPath</kbd> have been deprecated.</p>
<p>The main difference with the <a href="svgMorph.html">SVG Morph</a> component is the fact that this components is converting all path commands to <i>cubicBezierTo</i>,
giving it the upper hand over the original morph component. While the other component will spend time to process the path data and create polygons, this component should deliver
the animation faster and using considerably less power.</p>
<p>The main difference with the <a href="svgMorph.html">SVG Morph</a> component is the fact that this components is converting all path commands to <i>cubicBezierTo</i>, giving it
the upper hand over the original morph component in many regards. While the other component will spend time to process the path data and create polygons, this component should
deliver the animation faster and using considerably less power.</p>
<p>All path processing is powered by our <a href="https://github.com/thednp/svg-path-commander">SVGPathCommander</a> starting KUTE.js version 2.0.14, which aims to modernize and
improve the path processing and enable transition from closed to and from un-closed shapes.</p>
</div>
@ -131,13 +131,9 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle" class="bg-red" d="M559,597.4H43.6c-21,0-38-17-38-38V44c0-21,17-38,38-38H559c21,0,38,17,38,38v515.4 C597,580.4,580,597.4,559,597.4z"/>
<path id="rectangle" class="bg-olive" d="M559,597.4H43.6c-21,0-38-17-38-38V44c0-21,17-38,38-38H559c21,0,38,17,38,38v515.4 C597,580.4,580,597.4,559,597.4z"/>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011z"/>
</svg>
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle1" class="bg-olive" d="M559,597.4H43.6c-21,0-38-17-38-38V44c0-21,17-38,38-38H559c21,0,38,17,38,38v515.4 C597,580.4,580,597.4,559,597.4"/>
<path id="star1" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle2" class="bg-blue" d="M559,597.4H302.1H43.6c-21,0-38-17-38-38V300V44c0-21,17-38,38-38H300h259c21,0,38,17,38,38
v257.7v257.7C597,580.4,580,597.4,559,597.4"/>
@ -153,15 +149,12 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<p><b>Some takeaways:</b></p>
<ul>
<li>The <b class="text-red">red shape</b> and its corresponding end shape are both the originals, un-edited shapes, both have the <code>Z</code> path command, notice a strange line at the bottom-right of the rectangle
during the animation. We'll have another example about that line.</li>
<li>The <b class="text-olive">olive shape</b> and its corresponding end shape both have been edited by removing the <code>Z</code> path command, notice the strange line during the animation is gone, also a different
presentation.</li>
<li>The <b class="text-olive">olive shape</b> and its corresponding end shape are both the originals, un-edited shapes.</li>
<li>The <b class="text-blue">blue shape</b> and its corresponding end shape have been edited by removing their <code>Z</code> path commands and by adding additional curve points using a vector graphics editor to match
the amount of points in both shapes.</li>
</ul>
<p>In this example we focus on experimentation to discover ways to optimize the morph animation so that the points travel optimal distance. Keep in mind that the <code>Z</code> path command is actually a shorthand
for <code>L</code> (line path command), sometimes it's required to close the shape, our shapes here happen to be OK without it.</p>
for <code>L</code> (line path command), sometimes it's required to close the shape, however the path processing tools will remove it or replace it when converting path segments to <code>C</code> cubic-bezier.</p>
<p>Each morph animation as well as each pair of shapes can have its own quirks. You can use the technique on your shapes to optimize the animation to your style. Chris Coyier wrote
<a href="https://css-tricks.com/svg-shape-morphing-works/">an excelent article</a> in which he explains the terminology and workflow on how SVG morphing animation works with simple examples.</p>
@ -192,14 +185,6 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
<path id="line1" fill="transparent" stroke="#4CAF50" stroke-linejoin="round" stroke-width="15" d="M10 300 L580 300"/>
<path id="circle1" style="visibility:hidden" d="M10,300a290,290 0 1,1 580,0a290,290 0 1,1 -580,0z"/>
</svg>
<svg class="example-box-model example-box" id="morph-example-closed2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="line2" fill="transparent" stroke="#2196F3" stroke-linejoin="round" stroke-width="15" d="M10 300 L580 300z"/>
<path id="circle2" style="visibility:hidden" d="M10,300a290,290 0 1,1 580,0a290,290 0 1,1 -580,0"/>
</svg>
<svg class="example-box-model example-box" id="morph-example-closed3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="line3" fill="transparent" stroke="#e91b1f" stroke-linejoin="round" stroke-width="15" d="M10 300 L580 300"/>
<path id="circle3" style="visibility:hidden" d="M10,300a290,290 0 1,1 580,0a290,290 0 1,1 -580,0"/>
</svg>
<div class="example-buttons">
<a id="morphBtnClosed" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
@ -208,16 +193,12 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
<p>As you can see, the functionality of this component is very different from the <a href="svgMorph.html">svgMorph</a> component in the sense that it will
morph shapes as authored. If you replay the above animations, here are a few takeaways:</p>
<ul>
<li>the <b class="text-orange">orange</b> line and its corresponding shape are both closed, this makes the last <code>Z</code> path command behave like a regular
line, perhaps not the best visual presentation;</li>
<li>the <b class="text-green">green</b> line is not closed, but its corresponding shape is, still the <code>Z</code> path command seems to cause trouble, while
the presentation looks a bit different;</li>
<li>the <b class="text-blue">blue</b> line is now closed, but its corresponding shape isn't and with the <code>Z</code> path command missing from the second shape,
the animation looks significantly better;</li>
<li>the <b class="text-red">red</b> line and its corresponding shape are both not closed, another combination that delivers excellent outcome.</li>
<li>the <b class="text-orange">orange</b> line is <b>closed</b>, this makes the last <code>Z</code> path command behave like a regular line;</li>
<li>the <b class="text-green">green</b> line is <b>not closed</b>, and the presentation looks quite different compared to the other example as well as
the other <a href="./cubicMorph.html">cubicMorph</a> component.</li>
</ul>
<p>As you can see, this is another case where easy steps can be made to optimize the visual presentation. Keep in mind that stroke attributes like
<code>stroke-linejoin</code> such can have a small impact on your animation, particularly on start and end.</p>
<p>This is the visual presentation you can expect with this component. Keep in mind that stroke attributes like <code>stroke-linejoin</code> such can have
a small impact on your animation, particularly on start and end points.</p>
<h3>Subpath Example</h3>
@ -310,31 +291,6 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
<path id="rectangle-container" fill="#2196F3" mask="url(#symbol)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path id="circle-container" style="visibility: hidden;" d="M0,256a256,256 0 1,0 512,0a256,256 0 1,0 -512,0z"></path>
</svg>
<svg class="example-box-model example-box" id="complex-morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol1">
<rect width="100%" height="100%" fill="#fff"></rect>
<path id="symbol-left1" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-left-clone1" fill="#000" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"></path>
<path id="symbol-right1" fill="#000" d="M418.956 75.269l-123.176 217.79c-0.075 0.115-0.075 0.255 0 0.367l78.431 143.295c1.556 3.084 1.593 6.221 0.113 8.597-1.415 2.288-4.033 3.552-7.383 3.552h-55.57c-8.522 0-12.783-5.663-15.54-10.596 0 0-78.848-144.646-79.050-145.023 3.944-6.98 123.797-219.523 123.797-219.523 2.984-5.362 6.587-10.596 14.894-10.596h56.203c3.351 0 5.981 1.265 7.396 3.553 1.466 2.376 1.428 5.511-0.115 8.584z"></path>
<path id="eye-right1" style="visibility: hidden;" d="M352,128c2.6,0,5,0.5,7.4,1.3c2.3,0.8,4.5,2,6.6,3.6c10.6,7.8,18,24.2,18,43.1c0,16.2-5.3,30.5-13.5,39.2
c-3.1,3.3-6.6,5.8-10.5,7.3c-2.6,1-5.3,1.5-8,1.5c-4,0-7.8-1.1-11.3-3.1c-2.7-1.6-5.3-3.7-7.6-6.2c-7.9-8.7-13-22.8-13-38.7
c0-19.2,7.5-35.7,18.4-43.4c1.9-1.4,4-2.5,6.1-3.2C346.9,128.5,349.4,128,352,128z"></path>
<path id="eye-left1" style="visibility: hidden;" d="M176,156c10.4,0,19.7,1.4,27.5,3.9c14.5,4.7,23.5,13.4,23.5,24.8c0,3.7,1.9,21.5-0.1,24.8
c-3.3-5.5-9.2-10.3-16.7-13.9c-5.6-2.7-12.2-4.8-19.4-6c-4.7-0.8-9.6-1.2-14.7-1.2c-8.9,0-17.3,1.3-24.7,3.5
c-12.2,3.7-21.6,10-26.3,17.6c-2-3.3-0.1-21.1-0.1-24.8c0-11.3,8.8-19.9,23-24.6c3.7-1.2,7.8-2.2,12.2-2.9
C165.1,156.4,170.4,156,176,156z"></path>
<path id="mouth1" style="visibility: hidden;" d="M250.2,416c-42.9,0-82-16.6-111.5-43.9c-7-6.5-13.5-13.6-19.4-21.2c-3.8-4.9-7.3-10-10.6-15.4
c5.6,4.4,11.9,8.2,18.7,11.5c7.1,3.4,14.8,6.2,23,8.4c33.9,9.2,76.7,8.9,120.9,0.1c47.2-9.3,87.3-26.8,114.5-50.3
c6-5.1,11.3-10.6,16-16.3c5.6-6.9,10.3-14.2,13.8-21.8c-1.2,9.2-3.1,18.2-5.7,26.9c-2.6,8.8-5.9,17.3-9.7,25.5
C373.1,376.7,316.1,416,250.2,416L250.2,416z"></path>
</mask>
</defs>
<path id="rectangle-container1" fill="#9C27B0" mask="url(#symbol1)" d="M426.7,0H85.3C38.4,0,0,38.4,0,85.3v341.3c0,47,38.4,85.3,85.3,85.3h341.3
c46.9,0,85.3-38.4,85.3-85.3V85.3C512,38.4,473.6,0,426.7,0z"></path>
<path id="circle-container1" style="visibility: hidden;" d="M0,256c0,100.9,59.8,165.3,72,177.9c11.2,11.6,77.7,78.1,184,78.1c14.5,0,115.8-1.7,190.7-85.3
C510.1,356,512,274.1,512,256c0-18.9-2.1-96.7-61-165.9C375.7,1.8,269.4,0,256,0C241,0,141.3,1.7,66.6,83.7C1.9,154.8,0,237.9,0,256 z"></path>
</svg>
<svg class="example-box-model example-box" id="complex-morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol2">
@ -372,7 +328,7 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
<ul>
<li>Starting with KUTE.js version 2.0.14 the component implements <a href="https://github.com/thednp/svg-path-commander">SVGPathCommander</a> for path processing, solving previous issues with over-optimized
path strings among other issues. You can try the <a href="https://thednp.github.io/svg-path-commander/">SVGPathCommander demo page</a> to prepare your path strings.</li>
<li>Since animation works only with <code>path</code> <b>SVGElement</b>s, you might need a <a href="https://github.com/Waest/SVGPathConverter" target="_blank">convertToPath</a> utility.</li>
<li>Since animation works only with <code>path</code> <b>SVGElement</b>s, you might need a <a href="https://thednp.github.io/svg-path-commander/convert.html" target="_blank">shapeToPath</a> utility.</li>
<li>Both SVG morph components will always animate first sub-path from both starting and ending shapes, and for any case hopefully this demo will guide you in mastering the technique.</li>
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or <a href="https://github.com/Waest/SVGPathConverter">SVGPathCommander</a>
to apply a scale transformation to your shapes' path commands.</li>
@ -400,13 +356,10 @@ var tween = KUTE.to('#line', { path: '#circle' }).start();
</div>
<!-- /.site-wrapper -->
<!-- JavaScript =============================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<!-- <script src="./src/kute-extra.js"></script> -->
<script src="./src/kute-extra.min.js"></script>
<script src="./src/kute-extra.js"></script>
<script src="./assets/js/svgCubicMorph.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/scripts.js"></script>

5
svgMorph.html
View file

@ -381,7 +381,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<li>Starting with KUTE.js version 2.0.14 the component implements <a href="https://github.com/thednp/svg-path-commander">SVGPathCommander</a> for path processing, solving previous issues with over-optimized
path strings among other issues. You can try the <a href="https://thednp.github.io/svg-path-commander/">SVGPathCommander demo page</a> to prepare your path strings.</li>
<li>Since <b>SVG Morph</b> animation works only with <code>path</code> elements, you might need a <code>convertToPath</code> feature, so
<a href="https://github.com/Waest/SVGPathConverter" target="_blank">grab one here</a>.</li>
<a href="https://thednp.github.io/svg-path-commander/convert.html" target="_blank">grab one here</a>.</li>
<li>Both SVG morph components will always animate first sub-path from both starting and ending shapes, and for any case hopefully this demo will guide you in mastering the technique.</li>
<li>In some cases your start and end shapes don't have a very close size, you can use your vector graphics editor of choice or <a href="https://github.com/Waest/SVGPathConverter">SVGPathCommander</a>
to apply a scale transformation to your shapes' path commands.</li>
@ -419,8 +419,7 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/polyfill.min.js"></script>
<script src="./src/kute.min.js"></script>
<!-- <script src="../dist/kute.js"></script> -->
<script src="../dist/kute.js"></script>
<script src="./assets/js/prism.js"></script>
<script src="./assets/js/scripts.js"></script>
<script src="./assets/js/svgMorph.js"></script>