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

Changes:

Browse source 
* Removing the `getBestIndex` utility https://github.com/thednp/kute.js/issues/41
* simplify the SVG plugin
* documentation updates
This commit is contained in:
thednp 2016-10-09 05:45:21 +03:00
parent 352069e5c4
commit 670d18894c
11 changed files with 14 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/js/svg.js
View file

@ -9,7 +9,7 @@ morphBtn.addEventListener('click', function(){
}, false);
var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
showMorphInfo: true, morphIndex: 127,
morphIndex: 127,
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
});

1
options.html
View file

@ -107,7 +107,6 @@
<h3>SVG Plugin Options</h3>
<p>The following options only affect animation of the <code>path</code> tween property, to customize the SVG morph animation. See <a href="svg.html">SVG Plugin</a> page.</p>
<ul>
<li><kbd>showMorphInfo: true</kbd> when <code>true</code> the script will log information about the morph in order to help you maximize/customize the morph.</li>
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.</li>
<li><kbd>morphIndex: Number</kbd> option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".</li>
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape.</li>

2
src/kute-attr.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.92 | © dnp_theme | Attributes Plugin | MIT-License
// KUTE.js v1.5.93 | © dnp_theme | Attributes Plugin | MIT-License
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prS,u=n.pp,a=r.Interpolate.unit,f=r.Interpolate.number,s=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},l=["fill","stroke","stop-color"],p=n.truC,d=n.truD,v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};o.attr=function(t,e,r){var n={};for(var i in r){var o=v(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=l.indexOf(v(i))!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o,u={};for(o in r){var b=v(o),g=c(n,b.replace(/_+[a-z]+/,""));if(l.indexOf(b)===-1&&(/(%|[a-z]+)$/.test(r[o])||/(%|[a-z]+)$/.test(g))){var y=d(g).u||d(r[o]).u,A=/%/.test(y)?"_percent":"_"+y;o+A in e||(e[o+A]=function(t,e,r,n,i){var o=o||v(e).replace(A,"");t.setAttribute(o,a(r.v,n.v,n.u,i))}),u[o+A]=d(r[o])}else l.indexOf(b)>-1?(o in e||(e[o]=function(t,e,n,i,o){var u=u||v(e);t.setAttribute(u,s(n,i,o,r.keepHex))}),u[o]=p(r[o])):(o in e||(e[o]=function(t,e,r,n,i){var o=o||v(e);t.setAttribute(o,f(r,n,i))}),u[o]=parseFloat(r[o]))}return u}});

2
src/kute-bezier.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.92 | © dnp_theme | Bezier Plugin | MIT-License
// KUTE.js v1.5.93 | © dnp_theme | Bezier Plugin | MIT-License
!function(n,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof n.KUTE)throw new Error("Bezier Easing functions depend on KUTE.js");n.Ease=e(n.KUTE)}}(this,function(n){"use strict";var e="undefined"!=typeof global?global:window,t={};t.Bezier=e.Bezier=function(n,e,t,u){return r.pB(n,e,t,u)};var r=t.Bezier.prototype=e.Bezier.prototype;return r.ni=4,r.nms=.001,r.sp=1e-7,r.smi=10,r.ksts=11,r.ksss=1/(r.ksts-1),r.f32as="Float32Array"in e,r.msv=r.f32as?new Float32Array(r.ksts):new Array(r.ksts),r.A=function(n,e){return 1-3*e+3*n},r.B=function(n,e){return 3*e-6*n},r.C=function(n){return 3*n},r.pB=function(n,e,t,u){this._p=!1;var s=this;return function(a){return s._p||r.pc(n,t,e,u),n===e&&t===u?a:0===a?0:1===a?1:r.cB(r.gx(a,n,t),e,u)}},r.cB=function(n,e,t){return((r.A(e,t)*n+r.B(e,t))*n+r.C(e))*n},r.gS=function(n,e,t){return 3*r.A(e,t)*n*n+2*r.B(e,t)*n+r.C(e)},r.bS=function(n,e,t,u,s){var a,i,o=0,c=r.sp,f=r.smi;do i=e+(t-e)/2,a=r.cB(i,u,s)-n,a>0?t=i:e=i;while(Math.abs(a)>c&&++o<f);return i},r.nri=function(n,e,t,u){var s=0,a=r.ni;for(s;s<a;++s){var i=r.gS(e,t,u);if(0===i)return e;var o=r.cB(e,t,u)-n;e-=o/i}return e},r.csv=function(n,e){var t=0,u=r.ksts;for(t;t<u;++t)r.msv[t]=r.cB(t*r.ksss,n,e)},r.gx=function(n,e,t){for(var u=0,s=1,a=r.ksts-1;s!=a&&r.msv[s]<=n;++s)u+=r.ksss;--s;var i=(n-r.msv[s])/(r.msv[s+1]-r.msv[s]),o=u+i*r.ksss,c=r.gS(o,e,t),f=u+r.ksss;return c>=r.nms?r.nri(n,o,e,t):0===c?o:r.bS(n,u,f,e,t)},r.pc=function(n,e,t,u){this._p=!0,n==t&&e==u||r.csv(n,e)},e.Ease={},e.Ease.easeIn=function(){return r.pB(.42,0,1,1)},e.Ease.easeOut=function(){return r.pB(0,0,.58,1)},e.Ease.easeInOut=function(){return r.pB(.5,.16,.49,.86)},e.Ease.easeInSine=function(){return r.pB(.47,0,.745,.715)},e.Ease.easeOutSine=function(){return r.pB(.39,.575,.565,1)},e.Ease.easeInOutSine=function(){return r.pB(.445,.05,.55,.95)},e.Ease.easeInQuad=function(){return r.pB(.55,.085,.68,.53)},e.Ease.easeOutQuad=function(){return r.pB(.25,.46,.45,.94)},e.Ease.easeInOutQuad=function(){return r.pB(.455,.03,.515,.955)},e.Ease.easeInCubic=function(){return r.pB(.55,.055,.675,.19)},e.Ease.easeOutCubic=function(){return r.pB(.215,.61,.355,1)},e.Ease.easeInOutCubic=function(){return r.pB(.645,.045,.355,1)},e.Ease.easeInQuart=function(){return r.pB(.895,.03,.685,.22)},e.Ease.easeOutQuart=function(){return r.pB(.165,.84,.44,1)},e.Ease.easeInOutQuart=function(){return r.pB(.77,0,.175,1)},e.Ease.easeInQuint=function(){return r.pB(.755,.05,.855,.06)},e.Ease.easeOutQuint=function(){return r.pB(.23,1,.32,1)},e.Ease.easeInOutQuint=function(){return r.pB(.86,0,.07,1)},e.Ease.easeInExpo=function(){return r.pB(.95,.05,.795,.035)},e.Ease.easeOutExpo=function(){return r.pB(.19,1,.22,1)},e.Ease.easeInOutExpo=function(){return r.pB(1,0,0,1)},e.Ease.easeInCirc=function(){return r.pB(.6,.04,.98,.335)},e.Ease.easeOutCirc=function(){return r.pB(.075,.82,.165,1)},e.Ease.easeInOutCirc=function(){return r.pB(.785,.135,.15,.86)},e.Ease.easeInBack=function(){return r.pB(.6,-.28,.735,.045)},e.Ease.easeOutBack=function(){return r.pB(.175,.885,.32,1.275)},e.Ease.easeInOutBack=function(){return r.pB(.68,-.55,.265,1.55)},e.Ease.slowMo=function(){return r.pB(0,.5,1,.5)},e.Ease.slowMo1=function(){return r.pB(0,.7,1,.3)},e.Ease.slowMo2=function(){return r.pB(0,.9,1,.1)},t});

2
src/kute-css.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.92 | © dnp_theme | CSS Plugin | MIT-License
// KUTE.js v1.5.93 | © dnp_theme | CSS Plugin | MIT-License
!function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,o=t,e=r.dom,i=o.pp,n=o.prS,d=o.gCS,u=o.truD,a=o.property("borderRadius"),f=o.property("borderTopLeftRadius"),p=o.property("borderTopRightRadius"),g=o.property("borderBottomLeftRadius"),l=o.property("borderBottomRightRadius"),c=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],b=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],v=["clip"],m=["backgroundPosition"],R=s.concat(b,h),y=c.concat(v,s,b,h,m),T=y.length,x=(r.Interpolate.number,r.Interpolate.unit),B=B||{},L=0;L<T;L++){var C=y[L];c.indexOf(C)!==-1?B[C]="rgba(0,0,0,0)":R.indexOf(C)!==-1?B[C]=0:m.indexOf(C)!==-1?B[C]=[50,50]:"clip"===C&&(B[C]=[0,0,0,0])}for(var L=0,W=c.length;L<W;L++)C=c[L],i[C]=function(t,r){return i.cls(t,r)},n[C]=function(t,r,o){return d(t,r)||B[r]};for(var L=0,W=R.length;L<W;L++)C=R[L],i[C]=function(t,r){return i.box(t,r)},n[C]=function(t,r,o){return d(t,r)||B[r]};for(var L=0,W=s.length;L<W;L++)C=s[L],i[C]=function(t,r){return t in e||("borderRadius"===t?e[t]=function(t,r,o,e,i){t.style[a]=x(o.v,e.v,e.u,i)}:"borderTopLeftRadius"===t?e[t]=function(t,r,o,e,i){t.style[f]=x(o.v,e.v,e.u,i)}:"borderTopRightRadius"===t?e[t]=function(t,r,o,e,i){t.style[p]=x(o.v,e.v,e.u,i)}:"borderBottomLeftRadius"===t?e[t]=function(t,r,o,e,i){t.style[g]=x(o.v,e.v,e.u,i)}:"borderBottomRightRadius"===t&&(e[t]=function(t,r,o,e,i){t.style[l]=x(o.v,e.v,e.u,i)})),u(r)},n[C]=function(t,r,o){return d(t,r)||B[r]};return i.clip=function(t,r){if(t in e||(e[t]=function(t,r,o,e,i){var n=0,d=[];for(n;n<4;n++){var u=o[n].v,a=e[n].v,f=e[n].u||"px";d[n]=x(u,a,f,i)}t.style[r]="rect("+d+")"}),r instanceof Array)return[u(r[0]),u(r[1]),u(r[2]),u(r[3])];var o=r.replace(/rect|\(|\)/g,"");return o=/\,/g.test(o)?o.split(/\,/g):o.split(/\s/g),[u(o[0]),u(o[1]),u(o[2]),u(o[3])]},n.clip=function(t,r,o){var e=d(t,r),i=d(t,"width"),n=d(t,"height");return/rect/.test(e)?e:[0,i,n,0]},i.backgroundPosition=function(t,r){if(t in e||(e[t]=function(t,r,o,e,i){t.style[r]=x(o.x.v,e.x.v,"%",i)+" "+x(o.y.v,e.y.v,"%",i)}),r instanceof Array)return{x:u(r[0])||{v:50,u:"%"},y:u(r[1])||{v:50,u:"%"}};var o,i,n=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return n=/\,/g.test(n)?n.split(/\,/g):n.split(/\s/g),n=2===n.length?n:[n[0],50],o=u(n[0]),i=u(n[1]),{x:o,y:i}},n.backgroundPosition=function(t,r,o){return d(t,r)||B[r]},this});

2
src/kute-jquery.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.92 | © dnp_theme | jQuery Plugin | MIT-License
// KUTE.js v1.5.93 | © dnp_theme | jQuery Plugin | MIT-License
!function(e,t){if("function"==typeof define&&define.amd)define(["./kute.js","jquery"],function(e,n){return t(n,e),e});else if("object"==typeof module&&"function"==typeof require){var n=require("./kute.js"),r=require("jquery");module.exports=t(r,n)}else{if("undefined"==typeof e.KUTE||"undefined"==typeof e.$&&"undefined"==typeof e.jQuery)throw new Error("jQuery Plugin for KUTE.js depend on KUTE.js and jQuery");var r=e.jQuery||e.$,n=e.KUTE;r.fn.KUTE=t(r,n)}}(this,function(e,t){"use strict";return e.fn.fromTo=function(e,n,r){var i=this.length>1?this:this[0],o=this.length>1?"allFromTo":"fromTo";return t[o](i,e,n,r)},e.fn.to=function(e,n){var r=this.length>1?this:this[0],i=this.length>1?"allTo":"to";return t[i](r,e,n)},this});

2
src/kute-physics.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.92 | © dnp_theme | Physics Plugin | MIT-License
// KUTE.js v1.5.93 | © dnp_theme | Physics Plugin | MIT-License
!function(t,n){if("function"==typeof define&&define.amd)define(["kute.js"],n);else if("object"==typeof module&&"function"==typeof require)module.exports=n(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js");t.Physics=n(t.KUTE)}}(this,function(t){"use strict";var n="undefined"!=typeof global?global:window,r={};r.spring=n.spring=function(t){t=t||{};var n=Math.max(1,(t.frequency||300)/20),r=Math.pow(20,(t.friction||200)/100),e=t.anticipationStrength||0,o=(t.anticipationSize||0)/1e3;return function(t){var u,a,c,p,f,y,s,h;return y=t/(1-o)-o/(1-o),t<o?(h=o/(1-o)-o/(1-o),s=0/(1-o)-o/(1-o),f=Math.acos(1/i.A1(t,h)),c=(Math.acos(1/i.A1(t,s))-f)/(n*-o),u=i.A1):(u=i.A2,f=0,c=1),a=u(y,o,e,r),p=n*(t-o)*c+f,1-a*Math.cos(p)}};var i=r.spring.prototype=n.spring.prototype;i.A1=function(t,n,r){var i,e,o,u;return o=n/(1-n),u=0,e=(o-.8*u)/(o-u),i=(.8-e)/o,i*t*r/100+e},i.A2=function(t,n,r,i){return Math.pow(i/10,-t)*(1-t)},r.bounce=n.bounce=function(t){t=t||{};var n=Math.max(1,(t.frequency||300)/20),r=Math.pow(20,(t.friction||200)/100);return function(t){var i=Math.pow(r/10,-t)*(1-t),e=n*t*1+Math.PI/2;return i*Math.cos(e)}},r.gravity=n.gravity=function(t){var n,r,i,o,u,a;return t=t||{},n=(t.bounciness||400)/1250,i=(t.elasticity||200)/1e3,u=t.initialForce||!1,o=100,r=[],a=function(){var t,r;for(t=Math.sqrt(2/o),r={a:-t,b:t,H:1},u&&(r.a=0,r.b=2*r.b);r.H>.001;)a=r.b-r.a,r={a:r.b,b:r.b+a*n,H:r.H*n*n};return r.b}(),function(){var t,e,c,p;for(e=Math.sqrt(2/(o*a*a)),c={a:-e,b:e,H:1},u&&(c.a=0,c.b=2*c.b),r.push(c),t=a,p=[];c.b<1&&c.H>.001;)t=c.b-c.a,c={a:c.b,b:c.b+t*n,H:c.H*i},p.push(r.push(c));return p}(),function(n){var i,o,c;for(o=0,i=r[o];!(n>=i.a&&n<=i.b)&&(o+=1,i=r[o]););return c=i?e.getPointInCurve(i.a,i.b,i.H,n,t,a):u?0:1}};var e=r.gravity.prototype=n.gravity.prototype;e.getPointInCurve=function(t,n,r,i,e,o){var u,a;return o=n-t,a=2/o*i-1-2*t/o,u=a*a*r-r+1,e.initialForce&&(u=1-u),u},r.forceWithGravity=n.forceWithGravity=function(t){var n=t||{};return n.initialForce=!0,r.gravity(n)},r.bezier=n.BezierMultiPoint=function(t){t=t||{};var n=t.points,r=!1,i=[];return function(){var t,r;for(t in n){if(r=parseInt(t),r>=n.length-1)break;o.fn(n[r],n[r+1],i)}return i}(),function(t){return 0===t?0:1===t?1:o.yForX(t,i,r)}};var o=r.bezier.prototype=n.BezierMultiPoint.prototype;return o.fn=function(t,n,r){var i=function(r){return o.Bezier(r,t,t.cp[t.cp.length-1],n.cp[0],n)};return r.push(i)},o.Bezier=function(t,n,r,i,e){return{x:Math.pow(1-t,3)*n.x+3*Math.pow(1-t,2)*t*r.x+3*(1-t)*Math.pow(t,2)*i.x+Math.pow(t,3)*e.x,y:Math.pow(1-t,3)*n.y+3*Math.pow(1-t,2)*t*r.y+3*(1-t)*Math.pow(t,2)*i.y+Math.pow(t,3)*e.y}},o.yForX=function(t,n,r){var i,e,o,u,a,c,p,f,y=0,s=n.length;for(i=null,y;y<s&&(e=n[y],t>=e(0).x&&t<=e(1).x&&(i=e),null===i);y++);if(!i)return r?0:1;for(f=1e-4,u=0,c=1,a=(c+u)/2,p=i(a).x,o=0;Math.abs(t-p)>f&&o<100;)t>p?u=a:c=a,a=(c+u)/2,p=i(a).x,o++;return i(a).y},n.Physics={physicsInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.92-r/1e3,y:0}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.08+r/1e3,y:1}]}]})},physicsBackOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:0,y:0}]},{x:1,y:1,cp:[{x:.735+r/1e3,y:1.3}]}]})},physicsBackIn:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.28-r/1e3,y:-.6}]},{x:1,y:1,cp:[{x:1,y:1}]}]})},physicsBackInOut:function(t){var r;return t=t||{},r=t.friction||200,n.BezierMultiPoint({points:[{x:0,y:0,cp:[{x:.68-r/1e3,y:-.55}]},{x:1,y:1,cp:[{x:.265+r/1e3,y:1.45}]}]})}},r});

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

File diff suppressed because one or more lines are too long

2
src/kute-text.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.92 | © dnp_theme | Text Plugin | MIT-License
// KUTE.js v1.5.93 | © dnp_theme | Text Plugin | MIT-License
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=e.dom,i=n.prS,u=n.pp,s=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},u.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,u){var s=s||"alpha"===u.textChars?o:"upper"===u.textChars?a:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?l:u.textChars?u.textChars.split(""):o,m=s.length,b=s[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},u.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=parseInt(s(n,r,i))}),parseInt(e)||0},this});

4
src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

19
svg.html
View file

@ -85,7 +85,6 @@
<h3>SVG Morphing</h3>
<p>One of the most important parts of the plugin is the SVG morphing capability. It only applies to inline <code>&lt;path></code> and <code>&lt;glyph></code> SVG elements, with closed shapes (their <code>d</code> attribute ends with <code>z</code>). On initialization or animation start, depending on the chosen KUTE.js method, it will <a href="http://phrogz.net/SVG/convert_path_to_polygon.xhtml" target="_blank">sample a number of points</a> along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:</p>
<ul>
<li><kbd>showMorphInfo: true</kbd> when <code>true</code> the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is <code>false</code> for performance reasons. This option will also show you the first point for both shapes so you can visualize how the settings affect the morph.</li>
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 25 but the <a href="http://bl.ocks.org/mbostock/3081153" target="_blank">D3.js example</a> uses 4.</li>
<li><kbd>morphIndex: Number</kbd> option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural". By default, this option is not set.</li>
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape. By default this option is <code>false</code>.</li>
@ -127,21 +126,9 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
</div>
</div>
<p>As you can see, the animation could need some fine tunning. Let's open the console, and this time we'll pass in the <code>showMorphInfo: true</code> tween option that will help us find the best possible morph as performance and visual. Have a look:</p>
<p>As you can see, the animation could need some fine tunning. Let's go ahead and play with the new <a href="http://codepen.io/thednp/pen/YGayLg">utility</a>, it's gonna make your SVG morph work a breeze.</p>
<pre><code class="language-javascript">// let's check the morph info again
var tween = KUTE.to('#rectangle', { path: '#star' }, {showMorphInfo: true}).start();
// The console log should show you this
/* ------------------------------------
KUTE.js Path Morph Log
The morph used 153 points to draw both paths based on 15 morphPrecision value.
You may also consider a morphIndex for the second path. Currently the best index seems to be 129.
If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.
*/
</code></pre>
<p>Next, we're going to set the <code>morphIndex: 127</code> option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values around the recommended one. I also made a <a href="http://codepen.io/thednp/pen/bpRRZd" target="_blank">pen</a> for you to play with.</p>
<p>Well, we're going to set the <code>morphIndex: 127</code> tween option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values around the recommended one. I also made a <a href="http://codepen.io/thednp/pen/bpRRZd" target="_blank">pen</a> for you to play with.</p>
<div class="featurettes">
<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-blue" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
@ -154,7 +141,7 @@ If the current animation is not satisfactory, consider reversing one of the path
<a id="morphBtn1" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Much better! You can play with the <code>morphIndex</code> value, maybe you can get an even better or more interesting morph. Also notice the above shapes have some points indicating the start for each shape, making it even easier for you to improve the morph, a nice addition to the <code>showMorphInfo</code> option.</p>
<p>Much better! You can play with the <code>morphIndex</code> value, maybe you can get a more interesting morph.</p>
<h4>Morphing Polygon Paths</h4>
<p>When your paths are only <code>lineto</code>, <code>vertical-lineto</code> and <code>horizontal-lineto</code> based shapes (the <code>d</code> attribute consists of <code>L</code>, <code>V</code> and <code>H</code> path commands), the SVG Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The <code>morphPrecision</code> option will not apply since the paths are already polygons, still you will have access to all the other options.</p>