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

Changes:

Browse source 
* Disabled SVG Plugin related scripts on IE8
* Some documentation fine tuning
This commit is contained in:
thednp 2017-01-23 18:54:59 +02:00
parent 449f5ed1e3
commit 024fdd2322
8 changed files with 638 additions and 562 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

481
assets/js/svg.js
View file

@ -1,247 +1,254 @@
// basic morph
var morphTween = KUTE.to('#rectangle', { path: '#star' }, {
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
});
(function(){
var morphBtn = document.getElementById('morphBtn');
morphBtn.addEventListener('click', function(){
!morphTween.playing && morphTween.start();
}, false);
// invalidate for unsupported browsers
var isIE = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null ? parseFloat( RegExp.$1 ) : false;
if (isIE&&isIE<9) {return;} // return if SVG API is not supported
var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
morphIndex: 127,
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
});
// basic morph
var morphTween = KUTE.to('#rectangle', { path: '#star' }, {
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
});
var morphBtn1 = document.getElementById('morphBtn1');
morphBtn1.addEventListener('click', function(){
!morphTween1.playing && morphTween1.start();
}, false);
var morphBtn = document.getElementById('morphBtn');
morphBtn.addEventListener('click', function(){
!morphTween.playing && morphTween.start();
}, false);
// polygon morph
var morphTween21 = KUTE.fromTo('#triangle', {attr: { fill: '#673AB7'}, path: '#triangle' }, { attr: { fill: '#2196F3' }, path: '#square' }, {
duration: 1500, easing: 'easingCubicOut',
});
var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', attr:{ fill: '#2196F3'} }, { path: '#star2', attr:{ fill: 'deeppink' } }, {
morphIndex: 9,
delay: 500, duration: 1500, easing: 'easingCubicOut'
});
var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', attr:{ fill: 'deeppink'} }, { path: '#triangle', attr:{ fill: '#673AB7' } }, {
delay: 500, duration: 1500, easing: 'easingCubicOut'
});
var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
morphIndex: 127,
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
});
morphTween21.chain(morphTween22);
morphTween22.chain(morphTween23);
morphTween23.chain(morphTween21);
var morphBtn1 = document.getElementById('morphBtn1');
morphBtn1.addEventListener('click', function(){
!morphTween1.playing && morphTween1.start();
}, false);
var morphBtn2 = document.getElementById('morphBtn2');
morphBtn2.addEventListener('click', function(){
if ( !morphTween21.playing && !morphTween22.playing && !morphTween23.playing ) {
morphTween21.start(); morphTween21._dl = 500;
morphBtn2.innerHTML = 'Stop';
morphBtn2.className = 'btn btn-pink';
} else {
morphTween21.playing && morphTween21.stop(); morphTween21._dl = 0;
morphTween22.playing && morphTween22.stop();
morphTween23.playing && morphTween23.stop();
morphBtn2.innerHTML = 'Start';
morphBtn2.className = 'btn btn-green';
}
}, false);
// polygon morph
var morphTween21 = KUTE.fromTo('#triangle', {attr: { fill: '#673AB7'}, path: '#triangle' }, { attr: { fill: '#2196F3' }, path: '#square' }, {
duration: 1500, easing: 'easingCubicOut',
});
var morphTween22 = KUTE.fromTo('#triangle', {path: '#square', attr:{ fill: '#2196F3'} }, { path: '#star2', attr:{ fill: 'deeppink' } }, {
morphIndex: 9,
delay: 500, duration: 1500, easing: 'easingCubicOut'
});
var morphTween23 = KUTE.fromTo('#triangle', {path: '#star2', attr:{ fill: 'deeppink'} }, { path: '#triangle', attr:{ fill: '#673AB7' } }, {
delay: 500, duration: 1500, easing: 'easingCubicOut'
});
morphTween21.chain(morphTween22);
morphTween22.chain(morphTween23);
morphTween23.chain(morphTween21);
// simple multi morph
var multiMorphBtn = document.getElementById('multiMorphBtn');
var multiMorph1 = KUTE.to('#w11', { path: '#w24', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 17, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var multiMorph2 = KUTE.to('#w13', { path: '#w21', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 13, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var multiMorph3 = KUTE.to('#w14', { path: '#w22', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 76, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var multiMorph4 = KUTE.to('#w12', { path: '#w23', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 35, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
multiMorphBtn.addEventListener('click', function(){
!multiMorph1.playing && multiMorph1.start();
!multiMorph2.playing && multiMorph2.start();
!multiMorph3.playing && multiMorph3.start();
!multiMorph4.playing && multiMorph4.start();
}, false);
// complex multi morph
var compliMorphBtn = document.getElementById('compliMorphBtn');
var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', attr:{ fill: "#2196F3"} }, { path: '#circle-container', attr:{ fill: "#FF5722"} }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'}, { path: '#eye-left' }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'}, { path: '#mouth' }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'}, { path: '#eye-right' }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
compliMorphBtn.addEventListener('click', function(){
!compliMorph1.playing && compliMorph1.start();
!compliMorph2.playing && compliMorph2.start();
!compliMorph3.playing && compliMorph3.start();
!compliMorph4.playing && compliMorph4.start();
}, false);
// draw example
var drawBtn = document.getElementById('drawBtn');
var drawExample = document.getElementById('draw-example');
var drawEls = drawExample.querySelectorAll('*');
var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut", offset: 250});
var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut", offset: 250});
var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut", offset: 250});
draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);
drawBtn.addEventListener('click', function(){
!draw1.tweens[0].playing && !draw1.tweens[1].playing && !draw1.tweens[2].playing && !draw1.tweens[3].playing && !draw1.tweens[4].playing
&& !draw2.tweens[0].playing && !draw2.tweens[1].playing && !draw2.tweens[2].playing && !draw2.tweens[3].playing && !draw2.tweens[4].playing
&& !draw3.tweens[0].playing && !draw3.tweens[1].playing && !draw3.tweens[2].playing && !draw3.tweens[3].playing && !draw3.tweens[4].playing
&& !draw4.tweens[0].playing && !draw4.tweens[1].playing && !draw4.tweens[2].playing && !draw4.tweens[3].playing && !draw4.tweens[4].playing
&& !draw5.tweens[0].playing && !draw5.tweens[1].playing && !draw5.tweens[2].playing && !draw5.tweens[3].playing && !draw5.tweens[4].playing
&& draw1.start();
}, false);
// svgTransform examples
// rotation around shape center point
var svgRotate = document.getElementById('svgRotate');
var rotateBtn = document.getElementById('rotateBtn');
var svgr1 = svgRotate.getElementsByTagName('path')[0];
var svgr2 = svgRotate.getElementsByTagName('path')[1];
var svgTween11 = KUTE.to(svgr1, { rotate: 360 }, { transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
rotateBtn.addEventListener('click', function(){
!svgTween11.playing && svgTween11.start();
!svgTween12.playing && svgTween12.start();
}, false);
// rotation around shape's parent center point
var svgRotate1 = document.getElementById('svgRotate1');
var rotateBtn1 = document.getElementById('rotateBtn1');
var svgr11 = svgRotate1.getElementsByTagName('path')[0];
var svgr21 = svgRotate1.getElementsByTagName('path')[1];
var bb = svgr21.getBBox();
var translation = [580, 0];
var svgBB = svgr21.ownerSVGElement.getBBox();
var svgOriginX = (svgBB.width * 50 / 100) - translation[0];
var svgOriginY = (svgBB.height * 50 / 100)- translation[1];
var svgTween111 = KUTE.to(svgr11, { rotate: 360 }, { transformOrigin: (svgBB.width * 50 / 100) + 'px 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween121 = KUTE.to(svgr21, { svgTransform: { translate: translation, rotate: 360 } }, { transformOrigin: [svgOriginX, svgOriginY], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
rotateBtn1.addEventListener('click', function(){
!svgTween111.playing && svgTween111.start();
!svgTween121.playing && svgTween121.start();
}, false);
// translate
var svgTranslate = document.getElementById('svgTranslate');
var translateBtn = document.getElementById('translateBtn');
var svgt1 = svgTranslate.getElementsByTagName('path')[0];
var svgt2 = svgTranslate.getElementsByTagName('path')[1];
var svgTween21 = KUTE.to(svgt1, { translate: 580 }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween22 = KUTE.to(svgt2, {svgTransform: { translate: [0,0] } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
translateBtn.addEventListener('click', function(){
!svgTween21.playing && svgTween21.start();
!svgTween22.playing && svgTween22.start();
}, false);
// skews in chain
var svgSkew = document.getElementById('svgSkew');
var skewBtn = document.getElementById('skewBtn');
var svgsk1 = svgSkew.getElementsByTagName('path')[0];
var svgsk2 = svgSkew.getElementsByTagName('path')[1];
var svgTween31 = KUTE.to(svgsk1, { skewX: -15 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
var svgTween311 = KUTE.to(svgsk1, { skewY: 15 }, {transformOrigin: '50% 50% 0px', duration: 2500, easing: "easingCubicInOut"});
var svgTween313 = KUTE.to(svgsk1, { skewX: 0, skewY: 0 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { transformOrigin: '50% 50%', duration: 2500, easing: "easingCubicInOut"});
var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
svgTween31.chain(svgTween311);
svgTween311.chain(svgTween313);
svgTween32.chain(svgTween322);
svgTween322.chain(svgTween323);
skewBtn.addEventListener('click', function(){
!svgTween31.playing && !svgTween311.playing && !svgTween313.playing && svgTween31.start();
!svgTween32.playing && !svgTween322.playing && !svgTween323.playing && svgTween32.start();
}, false);
// scale
var svgScale = document.getElementById('svgScale');
var scaleBtn = document.getElementById('scaleBtn');
var svgs1 = svgScale.getElementsByTagName('path')[0];
var svgs2 = svgScale.getElementsByTagName('path')[1];
var svgTween41 = KUTE.to(svgs1, { scale: 1.5 }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween42 = KUTE.to(svgs2, {svgTransform: {
translate: 580,
scale: 0.5,
} }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
scaleBtn.addEventListener('click', function(){
!svgTween41.playing && svgTween41.start();
!svgTween42.playing && svgTween42.start();
}, false);
// mixed transforms
var svgMixed = document.getElementById('svgMixed');
var mixedBtn = document.getElementById('mixedBtn');
var svgm1 = svgMixed.getElementsByTagName('path')[0];
var svgm2 = svgMixed.getElementsByTagName('path')[1];
var svgTween51 = KUTE.to(svgm1, { // a regular CSS3 transform without svg plugin, works in modern browsers only, EXCEPT IE/Edge
translate: 250,
scale: 1.5,
rotate: 320,
skewX: -15
}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween52 = KUTE.to(svgm2, {
svgTransform: {
translate: 830,
scale: 1.5,
rotate: 320,
skewX: -15
}
}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
mixedBtn.addEventListener('click', function(){
!svgTween51.playing && svgTween51.start();
!svgTween52.playing && svgTween52.start();
}, false);
// chained transforms
var svgChained = document.getElementById('svgChained');
var chainedBtn = document.getElementById('chainedBtn');
var svgc = svgChained.getElementsByTagName('path')[0];
var svgTween6 = KUTE.fromTo(svgc,
{ // from
svgTransform: {
translate: 0,
scale: 0.5,
rotate: 45,
// skewX: 0
},
},
{ // to
svgTransform: {
translate: 450,
scale: 1.5,
rotate: 360,
// skewX: -45
var morphBtn2 = document.getElementById('morphBtn2');
morphBtn2.addEventListener('click', function(){
if ( !morphTween21.playing && !morphTween22.playing && !morphTween23.playing ) {
morphTween21.start(); morphTween21._dl = 500;
morphBtn2.innerHTML = 'Stop';
morphBtn2.className = 'btn btn-pink';
} else {
morphTween21.playing && morphTween21.stop(); morphTween21._dl = 0;
morphTween22.playing && morphTween22.stop();
morphTween23.playing && morphTween23.stop();
morphBtn2.innerHTML = 'Start';
morphBtn2.className = 'btn btn-green';
}
},
{transformOrigin: [256,256], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
}, false);
chainedBtn.addEventListener('click', function(){
!svgTween6.playing && svgTween6.start();
}, false);
// simple multi morph
var multiMorphBtn = document.getElementById('multiMorphBtn');
var multiMorph1 = KUTE.to('#w11', { path: '#w24', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 17, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var multiMorph2 = KUTE.to('#w13', { path: '#w21', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 13, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var multiMorph3 = KUTE.to('#w14', { path: '#w22', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 76, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var multiMorph4 = KUTE.to('#w12', { path: '#w23', attr:{ fill: "#56C5FF" } }, { morphPrecision: 10, morphIndex: 35, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
multiMorphBtn.addEventListener('click', function(){
!multiMorph1.playing && multiMorph1.start();
!multiMorph2.playing && multiMorph2.start();
!multiMorph3.playing && multiMorph3.start();
!multiMorph4.playing && multiMorph4.start();
}, false);
// complex multi morph
var compliMorphBtn = document.getElementById('compliMorphBtn');
var compliMorph1 = KUTE.fromTo('#rectangle-container', {path: '#rectangle-container', attr:{ fill: "#2196F3"} }, { path: '#circle-container', attr:{ fill: "#FF5722"} }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph2 = KUTE.fromTo('#symbol-left', {path: '#symbol-left'}, { path: '#eye-left' }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph3 = KUTE.fromTo('#symbol-left-clone', {path: '#symbol-left-clone'}, { path: '#mouth' }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph4 = KUTE.fromTo('#symbol-right', {path: '#symbol-right'}, { path: '#eye-right' }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
compliMorphBtn.addEventListener('click', function(){
!compliMorph1.playing && compliMorph1.start();
!compliMorph2.playing && compliMorph2.start();
!compliMorph3.playing && compliMorph3.start();
!compliMorph4.playing && compliMorph4.start();
}, false);
// draw example
var drawBtn = document.getElementById('drawBtn');
var drawExample = document.getElementById('draw-example');
var drawEls = drawExample.querySelectorAll('*');
var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut", offset: 250});
var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn", offset: 250});
var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut", offset: 250});
var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut", offset: 250});
draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);
drawBtn.addEventListener('click', function(){
!draw1.tweens[0].playing && !draw1.tweens[1].playing && !draw1.tweens[2].playing && !draw1.tweens[3].playing && !draw1.tweens[4].playing
&& !draw2.tweens[0].playing && !draw2.tweens[1].playing && !draw2.tweens[2].playing && !draw2.tweens[3].playing && !draw2.tweens[4].playing
&& !draw3.tweens[0].playing && !draw3.tweens[1].playing && !draw3.tweens[2].playing && !draw3.tweens[3].playing && !draw3.tweens[4].playing
&& !draw4.tweens[0].playing && !draw4.tweens[1].playing && !draw4.tweens[2].playing && !draw4.tweens[3].playing && !draw4.tweens[4].playing
&& !draw5.tweens[0].playing && !draw5.tweens[1].playing && !draw5.tweens[2].playing && !draw5.tweens[3].playing && !draw5.tweens[4].playing
&& draw1.start();
}, false);
// svgTransform examples
// rotation around shape center point
var svgRotate = document.getElementById('svgRotate');
var rotateBtn = document.getElementById('rotateBtn');
var svgr1 = svgRotate.getElementsByTagName('path')[0];
var svgr2 = svgRotate.getElementsByTagName('path')[1];
var svgTween11 = KUTE.to(svgr1, { rotate: 360 }, { transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween12 = KUTE.to(svgr2, { svgTransform: { translate: 580, rotate: 360 } }, { yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
rotateBtn.addEventListener('click', function(){
!svgTween11.playing && svgTween11.start();
!svgTween12.playing && svgTween12.start();
}, false);
// rotation around shape's parent center point
var svgRotate1 = document.getElementById('svgRotate1');
var rotateBtn1 = document.getElementById('rotateBtn1');
var svgr11 = svgRotate1.getElementsByTagName('path')[0];
var svgr21 = svgRotate1.getElementsByTagName('path')[1];
var bb = svgr21.getBBox();
var translation = [580, 0];
var svgBB = svgr21.ownerSVGElement.getBBox();
var svgOriginX = (svgBB.width * 50 / 100) - translation[0];
var svgOriginY = (svgBB.height * 50 / 100)- translation[1];
var svgTween111 = KUTE.to(svgr11, { rotate: 360 }, { transformOrigin: (svgBB.width * 50 / 100) + 'px 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween121 = KUTE.to(svgr21, { svgTransform: { translate: translation, rotate: 360 } }, { transformOrigin: [svgOriginX, svgOriginY], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
rotateBtn1.addEventListener('click', function(){
!svgTween111.playing && svgTween111.start();
!svgTween121.playing && svgTween121.start();
}, false);
// translate
var svgTranslate = document.getElementById('svgTranslate');
var translateBtn = document.getElementById('translateBtn');
var svgt1 = svgTranslate.getElementsByTagName('path')[0];
var svgt2 = svgTranslate.getElementsByTagName('path')[1];
var svgTween21 = KUTE.to(svgt1, { translate: 580 }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween22 = KUTE.to(svgt2, {svgTransform: { translate: [0,0] } }, {yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
translateBtn.addEventListener('click', function(){
!svgTween21.playing && svgTween21.start();
!svgTween22.playing && svgTween22.start();
}, false);
// skews in chain
var svgSkew = document.getElementById('svgSkew');
var skewBtn = document.getElementById('skewBtn');
var svgsk1 = svgSkew.getElementsByTagName('path')[0];
var svgsk2 = svgSkew.getElementsByTagName('path')[1];
var svgTween31 = KUTE.to(svgsk1, { skewX: -15 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
var svgTween311 = KUTE.to(svgsk1, { skewY: 15 }, {transformOrigin: '50% 50% 0px', duration: 2500, easing: "easingCubicInOut"});
var svgTween313 = KUTE.to(svgsk1, { skewX: 0, skewY: 0 }, {transformOrigin: '50% 50% 0px', duration: 1500, easing: "easingCubicInOut"});
var svgTween32 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewX: -15 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
var svgTween322 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 15 } }, { transformOrigin: '50% 50%', duration: 2500, easing: "easingCubicInOut"});
var svgTween323 = KUTE.to(svgsk2, {svgTransform: { translate: 580, skewY: 0, skewX: 0 } }, { transformOrigin: '50% 50%', duration: 1500, easing: "easingCubicInOut"});
svgTween31.chain(svgTween311);
svgTween311.chain(svgTween313);
svgTween32.chain(svgTween322);
svgTween322.chain(svgTween323);
skewBtn.addEventListener('click', function(){
!svgTween31.playing && !svgTween311.playing && !svgTween313.playing && svgTween31.start();
!svgTween32.playing && !svgTween322.playing && !svgTween323.playing && svgTween32.start();
}, false);
// scale
var svgScale = document.getElementById('svgScale');
var scaleBtn = document.getElementById('scaleBtn');
var svgs1 = svgScale.getElementsByTagName('path')[0];
var svgs2 = svgScale.getElementsByTagName('path')[1];
var svgTween41 = KUTE.to(svgs1, { scale: 1.5 }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween42 = KUTE.to(svgs2, {svgTransform: {
translate: 580,
scale: 0.5,
} }, {transformOrigin: '50% 50%', yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
scaleBtn.addEventListener('click', function(){
!svgTween41.playing && svgTween41.start();
!svgTween42.playing && svgTween42.start();
}, false);
// mixed transforms
var svgMixed = document.getElementById('svgMixed');
var mixedBtn = document.getElementById('mixedBtn');
var svgm1 = svgMixed.getElementsByTagName('path')[0];
var svgm2 = svgMixed.getElementsByTagName('path')[1];
var svgTween51 = KUTE.to(svgm1, { // a regular CSS3 transform without svg plugin, works in modern browsers only, EXCEPT IE/Edge
translate: 250,
scale: 1.5,
rotate: 320,
skewX: -15
}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
var svgTween52 = KUTE.to(svgm2, {
svgTransform: {
translate: 830,
scale: 1.5,
rotate: 320,
skewX: -15
}
}, {transformOrigin: "50% 50%", yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
mixedBtn.addEventListener('click', function(){
!svgTween51.playing && svgTween51.start();
!svgTween52.playing && svgTween52.start();
}, false);
// chained transforms
var svgChained = document.getElementById('svgChained');
var chainedBtn = document.getElementById('chainedBtn');
var svgc = svgChained.getElementsByTagName('path')[0];
var svgTween6 = KUTE.fromTo(svgc,
{ // from
svgTransform: {
translate: 0,
scale: 0.5,
rotate: 45,
// skewX: 0
},
},
{ // to
svgTransform: {
translate: 450,
scale: 1.5,
rotate: 360,
// skewX: -45
}
},
{transformOrigin: [256,256], yoyo: true, repeat: 1, duration: 1500, easing: "easingCubicOut"});
chainedBtn.addEventListener('click', function(){
!svgTween6.playing && svgTween6.start();
}, false);
}())

100
features.html
View file

@ -81,90 +81,102 @@
<div class="content-wrap">
<h2>Features Overview</h2>
<h3 id="performance">Badass Performance</h3>
<p>KUTE.js was developed with best practices in mind for <strong>fastest code execution</strong> and <strong>memory efficiency</strong>, but performance varies from case to case, as well as for all the other Javascript based animation engines.
As a quick note on <a href="about.html#how">how it works</a>, well for the most part values are cached for the entire duration of the animation so that the repetitive tasks run smoothly, uninterruptible and avoid layout thrashing. We all
know the more properties used or the more elements to animate at the same time, the more power is required.</p>
<p>KUTE.js was developed with best practices in mind for <strong>fastest code execution</strong> and <strong>memory efficiency</strong>, but performance varies from case to case, as well as for all the
other Javascript based animation engines. As a quick note on <a href="about.html#how">how it works</a>, well for the most part values are cached for the entire duration of the animation so that the
repetitive tasks run smoothly, uninterruptible and avoid layout thrashing. We all know the more properties used or the more elements to animate at the same time, the more power is required.</p>
<p><span class="ion-ios-cog media"></span>Of course some would argue on many aspects, but we all trade something for the sake of something else, such as convenience and/or flexibility or fork a project that's already great to make it.. better.
For the sake of performance or simply willing to provide a feature, some trade/neglect other elements such as syncronisation (check this <a href="https://www.youtube.com/watch?v=1ZWugkJV5Ks" target="_blank">video</a>), code simplicity
(lots of CSS for a <a href="https://daneden.github.io/animate.css/" target="_blank">custom animation</a>) and more other.</p>
<p><span class="ion-ios-cog media"></span>Of course some would argue on many aspects, but we all trade something for the sake of something else, such as convenience and/or flexibility or fork a project
that's already great to make it.. better. For the sake of performance or simply willing to provide a feature, some trade/neglect other elements such as syncronisation (check this
<a href="https://www.youtube.com/watch?v=1ZWugkJV5Ks" target="_blank">video</a>), code simplicity (lots of CSS for a <a href="https://daneden.github.io/animate.css/" target="_blank">custom animation</a>)
and more other.</p>
<p>To learn more about how performance can vary from case to case, check out <a href="about.html#performance">this section</a>, it's very informative.</p>
</div>
<div class="content-wrap">
<h3 id="extensible">Extensible Prototype</h3>
<p>KUTE.js already packs quite alot of features, and that is thanks to its flexible nature that allows you to easily extend to your heart's desire. Whether you like to extend with CSS properties, easing functions, HTML presentation attributes
or anything that Javascript can touch, even if it's not possible with CSS transitions or other Javascript libraries, KUTE.js makes it super easy. </p>
<p>For instance if you want to be able to animate the <code>filter</code> property, you only need three functions: one for preparing the property values needed for tween object build-up, a second function to read current value and the last one
for the DOM update callback, everything else is nicely taken care of. KUTE.js also provides very useful utilities for processing strings, HEX/RGBA colors and other tools you can use for your own plugin's processing.</p>
<p>KUTE.js already packs quite alot of features, and that is thanks to its flexible nature that allows you to easily extend to your heart's desire. Whether you like to extend with CSS properties, easing
functions, HTML presentation attributes or anything that Javascript can touch, even if it's not possible with CSS transitions or other Javascript libraries, KUTE.js makes it super easy. </p>
<p>For instance if you want to be able to animate the <code>filter</code> property, you only need three functions: one for preparing the property values needed for tween object build-up, a second function
to read current value and the last one for the DOM update callback, everything else is nicely taken care of. KUTE.js also provides very useful utilities for processing strings, HEX/RGBA colors and other
tools you can use for your own plugin's processing.</p>
<p>You may want to head over to the <a href="extend.html">extend</a> page for an indepth guide on how to write your own plugin/extension.</p>
</div>
<div class="content-wrap">
<h3 id="prefix">Auto Browser Prefix</h3>
<p>KUTE.js uses a simple function to determine the vendor prefix and checks if the prefix is required. In any case it caches the prefixed/unprefixed property name in a variable to make it available when needed. This applies to the following CSS3
properties: <code>transform</code>, <code>perspective</code>, <code>perspective-origin</code>, <code>border-radius</code> and the <code>requestAnimationFrame</code> Javascript method.</p>
<p><span class="ion-paper-airplane media"></span>We aren't only targeting properly browsers for CSS3 styling, but also increase performance because we don't need to update the styling on every frame for all browsers (and their versions) at once,
just the right and only one; <strong>less</strong> string concatenation = <strong>more</strong> performance. This asumes you are NOT styling the above CSS3 properties using your stylesheets to avoid glitches with legacy browsers.</p>
<p>KUTE.js uses a simple function to determine the vendor prefix and checks if the prefix is required. In any case it caches the prefixed/unprefixed property name in a variable to make it available when needed.
This applies to the following CSS3 properties: <code>transform</code>, <code>perspective</code>, <code>perspective-origin</code>, <code>border-radius</code> and the <code>requestAnimationFrame</code>
Javascript method.</p>
<p><span class="ion-paper-airplane media"></span>We aren't only targeting properly browsers for CSS3 styling, but also increase performance because we don't need to update the styling on every frame for all
browsers (and their versions) at once, just the right and only one; <strong>less</strong> string concatenation = <strong>more</strong> performance. This asumes you are NOT styling the above CSS3 properties
using your stylesheets to avoid glitches with legacy browsers.</p>
<p>This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.</p>
</div>
<div class="content-wrap">
<h3 id="compatibility">Browser Compatibility</h3>
<p>KUTE.js covers all <strong>modern</strong> browsers but also provides fallback options for legacy browsers. The <strong>prefix free</strong> feature mentioned above is one way to enable smooth Javascript based animations on older versions
Gecko/Webkit/IE browsers for <code>transform</code> and <code>border-radius</code>. Generally, KUTE.js is built around most used properties, so I highly recommend checking the <a href="http://caniuse.com" target="_blank">can I use</a> website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support <a href="http://caniuse.com/#feat=transforms2d">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d">3D transforms</a> so make sure you know what browsers support and <a href="http://browserhacks.com/" target="_blank">how to target them</a> before you get to work with a complete browser supported animation setup.</p>
<p><span class="ion-android-globe media"></span>I've put a lot of work in making KUTE.js work with all Internet Explorer versions starting with IE8 and it really works with the help of <a href="https://polyfill.io/" target="_blank">polyfills</a> and the appropriate code to detect them. All you need to do is to let the browser breathe, espectially IE8 needs to have resize handlers as minimal as possible. On the other side, IE9 really shines with 2D transforms animation, something
that's impossible with CSS <code>transition</code>.</p>
<p>Speaking of polyfills, KUTE.js no longer requires <code>window.requestAnimationFrame()</code> for the main thread, but it does require the <code>window.performance.now()</code> for checking the current time, <code>.indexOf()</code> for array/string
checks, <code>window.getComputedStyle()</code> for the <code>.to()</code> method and <code>.addEventListener()</code> for scroll animation. Unlike other developers I didn't include these polyfills in the code to keep it clean, so that
YOU decide whether your project need them or not. Also know that when using the recommended <a href="https://polyfill.io/" target="_blank">polyfill service</a> some <strong>browser detection will not work</strong> because they fill the
gap and your code won't work as expected. For instance this would check for IE8 browser <code>var isIE = document.all && !document.addEventListener;</code> but the polyfill covers <code>.addEventListener()</code> so you will never succeed.
This very demo is a great solution for targeting Microsoft's legacy browsers.</p>
<p>KUTE.js covers all <strong>modern</strong> browsers but also provides fallback options for legacy browsers. The <strong>prefix free</strong> feature mentioned above is one way to enable smooth Javascript
based animations on older versions Gecko/Webkit/IE browsers for <code>transform</code> and <code>border-radius</code>. Generally, KUTE.js is built around most used properties, so I highly recommend checking
the <a href="http://caniuse.com" target="_blank">can I use</a> website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support
<a href="http://caniuse.com/#feat=transforms2d">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d">3D transforms</a> so make sure you know what browsers support and
<a href="http://browserhacks.com/" target="_blank">how to target them</a> before you get to work with a complete browser supported animation setup.</p>
<p><span class="ion-android-globe media"></span>I've put a lot of work in making KUTE.js work with all Internet Explorer versions starting with IE8 (compatibility mode OFF) and it really works with the help of
<a href="https://polyfill.io/" target="_blank">polyfills</a> and the appropriate code to detect them. All you need to do is to let the browser breathe, espectially IE8 needs to have resize handlers as minimal
as possible. On the other side, IE9 really shines with 2D transforms animation, something that's impossible with CSS <code>transition</code>.</p>
<p>Speaking of polyfills, KUTE.js no longer requires <code>window.requestAnimationFrame()</code> for the main thread, but it does require the <code>window.performance.now()</code> for checking the current time,
<code>.indexOf()</code> for array/string checks, <code>window.getComputedStyle()</code> for the <code>.to()</code> method and <code>.addEventListener()</code> for scroll animation. Unlike other developers
I didn't include these polyfills in the code to keep it clean, so that YOU decide whether your project need them or not. Also know that when using the recommended
<a href="https://polyfill.io/" target="_blank">polyfill service</a> some <strong>browser detection will not work</strong> because they fill the gap and your code won't work as expected. For instance this would
check for IE8 browser <code>var isIE = document.all && !document.addEventListener;</code> but the polyfill covers <code>.addEventListener()</code> so you will never succeed. This very demo is a great solution
for targeting Microsoft's legacy browsers.</p>
<p>As of Safari, we did some tests there too, KUTE.js does it really well.</p>
</div>
<div class="content-wrap">
<h3 id="methods">Methods, Tools and Options</h3>
<h4>Building Tween Objects</h4>
<p>KUTE.js allows you to create tween objects with the help of <code>.to()</code> and <code>.fromTo()</code> methods for a single element, with distinctive functionalities, and the other <code>.allTo()</code> and <code>.allFromTo()</code> that
use the first two for collections of elements.</p>
<p>KUTE.js allows you to create tween objects with the help of <code>.to()</code> and <code>.fromTo()</code> methods for a single element, with distinctive functionalities, and the other <code>.allTo()</code> and
<code>.allFromTo()</code> that use the first two for collections of elements.</p>
<p><kbd>KUTE.to('selector', toValues, options)</kbd> method is super simple and straightforward and requires a polyfill for <code>window.getComputedStyle()</code> Javascript method on IE8 and more other legacy browsers in order to read the current
property value. If no value is set in the stylesheets or inline style, a property specific value will be used. It also computes the value on animation start, delaying the actual animation and potentially creating sync issues on large amounts
of elements, but it has the great ability to stack <code>transform</code> properties as they come in chained tweens. However fixing the sync issues is not that hard, see the example at <a href="api.html#start">start()</a> method API.</p>
<p><kbd>KUTE.to('selector', toValues, options)</kbd> method is super simple and straightforward and requires a polyfill for <code>window.getComputedStyle()</code> Javascript method on IE8 and more other legacy
browsers in order to read the current property value. If no value is set in the stylesheets or inline style, a property specific value will be used. It also computes the value on animation start, delaying the
actual animation and potentially creating sync issues on large amounts of elements, but it has the great ability to stack <code>transform</code> properties as they come in chained tweens. However fixing the
sync issues is not that hard, see the example at <a href="api.html#start">start()</a> method API.</p>
<p><kbd>KUTE.fromTo('selector', fromValues, toValues, options)</kbd> is the other method that's most powerful in terms of performance, flexibility and control on the animation. As an example, while the first method may not process properties'
measurement units properly, this method will never fail in that regard, because you can set for both starting values and end values the exact values with the right unit you need.</p>
<p><kbd>KUTE.fromTo('selector', fromValues, toValues, options)</kbd> is the other method that's most powerful in terms of performance, flexibility and control on the animation. As an example, while the first method
may not process properties' measurement units properly, this method will never fail in that regard, because you can set for both starting values and end values the exact values with the right unit you need.</p>
<p>It doesn't stack <code>transform</code> properties for chained tweens but you can set all properties to be used in all tweens if you want (end values from previous tween become start values for the next AND unchanged start values become end
values), and make sure nothing is left unchecked, to avoid animation glitches. Still, this method is the fastest and bestest for super performance and super control.</p>
<p>It doesn't stack <code>transform</code> properties for chained tweens but you can set all properties to be used in all tweens if you want (end values from previous tween become start values for the next AND
unchanged start values become end values), and make sure nothing is left unchecked, to avoid animation glitches. Still, this method is the fastest and bestest for super performance and super control.</p>
<p><kbd>KUTE.allTo('selector', toValues, options)</kbd> and <kbd>KUTE.allFromTo('selector', fromValues, toValues, options)</kbd> inherit all functionality from the <code>.to()</code> and <code>.fromTo()</code> method respectively, but they apply
to collections of elements. Unlike the first two methods that create single element tween objects, these two create collections of tween objects. Be sure to check the <a href="api.html">API</a> documentation on all the methods.</p>
<p><kbd>KUTE.allTo('selector', toValues, options)</kbd> and <kbd>KUTE.allFromTo('selector', fromValues, toValues, options)</kbd> inherit all functionality from the <code>.to()</code> and <code>.fromTo()</code>
method respectively, but they apply to collections of elements. Unlike the first two methods that create single element tween objects, these two create collections of tween objects. Be sure to check the
<a href="api.html">API</a> documentation on all the methods.</p>
<h4>Tween Control</h4>
<p>Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: <code>.start()</code>, <code>.stop()</code>, <code>.pause()</code> and <code>.resume()</code>.
These public methods work either when animation is not running, running or is paused. You need to see the <a href="api.html">documentation</a> to learn how these work.</p>
<p>Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: <code>.start()</code>, <code>.stop()</code>, <code>.pause()</code>
and <code>.resume()</code>. These public methods work either when animation is not running, running or is paused. You need to see the <a href="api.html">documentation</a> to learn how these work.</p>
<h4>Tween Options</h4>
<p>Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for <code>transform</code>. For instance 3D rotations require a <code>perspective</code> or a <code>perspective-origin</code>,
right? Well, make sure to <a href="options.html">check that out</a>.</p>
<p>Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for <code>transform</code>. For instance 3D rotations require a <code>perspective</code> or
a <code>perspective-origin</code>, right? Well, make sure to <a href="options.html">check that out</a>.</p>
<h4>Callback System</h4>
<p>Another important KUTE.js feature is the solid callback system. This allows you to schedule functions to run on animation start, on each frame, on pause / resume, on stop and on complete. The functions bound at start or resume will delay the
animation, while the functions running on each frame can potentially influence performance on large amounts of elements so you must use them wisely.</p>
<p>Another important KUTE.js feature is the solid callback system. This allows you to schedule functions to run on animation start, on each frame, on pause / resume, on stop and on complete. The functions bound at
start or resume will delay the animation, while the functions running on each frame can potentially influence performance on large amounts of elements so you must use them wisely.</p>
<h4>Addons</h4>
<p>KUTE.js sports some fine tuned addons: jQuery Plugin, <a href="svg.html">SVG Plugin</a>, <a href="text.html">Text Plugin</a>, <a href="attr.html">Attributes Plugin</a>, <a href="css.html">CSS Plugin</a>, cubic bezier easing functions and also
physics based easing functions. It also features an extensive guide on <a href="extend.html">how to extend</a>, but I'm open for more features in the future.</p>
<p>KUTE.js sports some fine tuned addons: jQuery Plugin, <a href="svg.html">SVG Plugin</a>, <a href="text.html">Text Plugin</a>, <a href="attr.html">Attributes Plugin</a>, <a href="css.html">CSS Plugin</a>, cubic
bezier easing functions and also physics based easing functions. It also features an extensive guide on <a href="extend.html">how to extend</a>, but I'm open for more features in the future.</p>
<p>Check the <a href="api.html">documentation</a> on these methods and the <a href="examples.html">examples page</a> for more.</p>
</div>
<div class="content-wrap">
<h3>Developer Friendly</h3>
<p><span class="ion-happy media"></span>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms. The terms in short allow you to use the script
<strong>for free</strong> in both <strong>personal</strong> and <strong>commercial application</strong> as long as you give <strong>proper credits</strong> to the original author. Also a link back would be appreciated.</p>
<p><span class="ion-happy media"></span>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms. The terms in short
allow you to use the script <strong>for free</strong> in both <strong>personal</strong> and <strong>commercial application</strong> as long as you give <strong>proper credits</strong> to the original author.
Also a link back would be appreciated.</p>
<p>Also KUTE.js is <a href="api.html">super documented</a>, all features and options are showcased with detailed <a href="examples.html">examples</a> so you can get your hands really dirty.</p>
<ul id="share" class="nav">

28
index.html
View file

@ -28,8 +28,7 @@
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js">
</script>
<script src="./assets/js/minifill.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
@ -123,35 +122,40 @@
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Badass Performance</h3>
<p>KUTE.js is crazy fast with it's <a href="features.html#performance">outstanding performance</a> and super fast code execution, it's also memory efficient. I made a <a href="performance.html">cool demo</a> to showcase how KUTE.js
really scales on performance. </p>
<p>KUTE.js is crazy fast with it's <a href="features.html#performance">outstanding performance</a> and super fast code execution, it's also memory efficient. I made a
<a href="performance.html">cool demo</a> to showcase how KUTE.js really scales on performance. </p>
</div>
<div class="col2">
<h3>Prefix Free</h3>
<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> mostly for <code>transform</code>, and even allows you to use the utilities yourself in your apps or your own plugins.</p>
<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> mostly for <code>transform</code>, and even allows
you to use the utilities yourself in your apps or your own plugins.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>All Browsers Compatible</h3>
<p>KUTE.js covers <a href="features.html#compatibility">all modern browsers</a> with fallback options for legacy browsers. When using <a href="https://polyfill.io/">polyfills</a> and the right <a href="http://browserhacks.com" target="_blank">browser detection</a> you can manage all kinds of <a href="examples.html#crossbrowser">fallback animations</a> for legacy browsers.</p>
<p>KUTE.js covers <a href="features.html#compatibility">all modern browsers</a> with fallback options for legacy browsers. When using <a href="https://polyfill.io/">polyfills</a>
and the right <a href="http://browserhacks.com" target="_blank">browser detection</a> you can manage all kinds of <a href="examples.html#crossbrowser">fallback animations</a>
for legacy browsers.</p>
</div>
<div class="col2">
<h3>Powerful Methods</h3>
<p>KUTE.js allows you to <a href="features.html#methods">create tweens</a> and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum <a href="options.html">tween options</a>.</p>
<p>KUTE.js allows you to <a href="features.html#methods">create tweens</a> and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full
spectrum <a href="options.html">tween options</a>.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Packed With Tools</h3>
<p>KUTE.js comes with a <a href="css.html" title="The CSS Plugin provides support for border radius, additional color and box model properties, as well as for clip and backgroun-position.">CSS Plugin</a>, a <a href="svg.html" title="The SVG Plugin allows you to morph and draw SVG, as well as animate other SVG related CSS properties.">SVG Plugin</a>,
an <a href="attr.html" title="The Attributes Plugin allows you to animate any numeric presentation attribute.">ATTR Plugin</a>, a <a href="text.html">Text Plugin</a> and a jQuery plugin, <a href="easing.html">easing functions</a>,
color convertors, utility functions, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
<p>KUTE.js comes with a <a href="css.html" title="The CSS Plugin provides support for border radius, additional color and box model properties, as well as for clip and backgroun-position.">CSS Plugin</a>,
a <a href="svg.html" title="The SVG Plugin allows you to morph and draw SVG, as well as animate other SVG related CSS properties.">SVG Plugin</a>,
an <a href="attr.html" title="The Attributes Plugin allows you to animate any numeric presentation attribute.">ATTR Plugin</a>, a <a href="text.html">Text Plugin</a> and a jQuery plugin,
<a href="easing.html">easing functions</a>, color convertors, utility functions, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
</div>
<div class="col2">
<h3>Plenty Of Properties</h3>
<p>KUTE.js covers <a href="properties.html">all animation needs</a> such as SVG morph &amp; transform and other specific CSS properties, then CSS3 <code>transform</code>, <code>scroll</code>, <code>border-radius</code>, and almost
the full box model or text properties.</p>
<p>KUTE.js covers <a href="properties.html">all animation needs</a> such as SVG morph &amp; transform and other specific CSS properties, then CSS3 <code>transform</code>, <code>scroll</code>,
<code>border-radius</code>, and almost the full box model or text properties.</p>
</div>
</div>
<div class="columns hiddenoverflow">

45
options.html
View file

@ -85,8 +85,8 @@
<div class="content-wrap">
<h2 id="tweenoptions">Tween Options</h2>
<p>Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can override these default values, as
we'll see later on this page.</p>
<p>Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can
override these default values, as we'll see later on this page.</p>
<h3>Common Options</h3>
<p>These options affect all types of tweens, no matter the properties used or context.</p>
@ -94,27 +94,31 @@
<li><kbd>duration: 500</kbd> option allows you to set the animation duration in miliseconds. The default value is <strong>700</strong>.</li>
<li><kbd>repeat: 20</kbd> option allows you to run the animation of given tween multiple times. The default value is <strong>0</strong>.</li>
<li><kbd>delay: 500</kbd> option allows you to delay the tween animation for a certain number of miliseconds. The default value is <strong>0</strong>.</li>
<li><kbd>offset: 200</kbd> option is only for <code>.allTo()</code> and <code>.allFromTo()</code> methods. This allows you to set a base delay in miliseconds that increases with each element in the collection. This has no effect on other methods
and the default value is <strong>0</strong>.</li>
<li><kbd>repeatDelay: 500</kbd> option allows you to set a number of miliseconds delay between repeatable animations. If <code>repeat</code> option is set to <strong>0</strong>, will produce no effect. The default value is <strong>0</strong>.</li>
<li><kbd>yoyo: true/false</kbd> option makes use of the internal reverse functionality to also animate from <b>end</b> to <b>start</b> for a given tween. This option requires that you use the <code>repeat</code> option with at least value
<b>1</b>. The default value is <strong>false</strong>.</li>
<li><kbd>easing: 'easingCubicInOut'</kbd> option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value is <strong>linear</strong>.</li>
<li><kbd>offset: 200</kbd> option is only for <code>.allTo()</code> and <code>.allFromTo()</code> methods. This allows you to set a base delay in miliseconds that increases with each element in the collection.
This has no effect on other methods and the default value is <strong>0</strong>.</li>
<li><kbd>repeatDelay: 500</kbd> option allows you to set a number of miliseconds delay between repeatable animations. If <code>repeat</code> option is set to <strong>0</strong>, will produce no effect.
The default value is <strong>0</strong>.</li>
<li><kbd>yoyo: true/false</kbd> option makes use of the internal reverse functionality to also animate from <b>end</b> to <b>start</b> for a given tween. This option requires that you use the <code>repeat</code>
option with at least value <b>1</b>. The default value is <strong>false</strong>.</li>
<li><kbd>easing: 'easingCubicInOut'</kbd> option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value
is <strong>linear</strong>.</li>
</ul>
<h3>Transform Options</h3>
<p>These options only affect animation involving any 3D property from CSS3 <code>transform</code> and have no effect on other CSS properties. While you can set <code>perspective</code> or <code>perspective origin</code> via CSS, these options
are here to help, especially with full browser support and preffix free handling.</p>
<p>These options only affect animation involving any 3D property from CSS3 <code>transform</code> and have no effect on other CSS properties. While you can set <code>perspective</code> or
<code>perspective origin</code> via CSS, these options are here to help, especially with full browser support and preffix free handling.</p>
<ul>
<li><kbd>perspective: 500</kbd> option allows you to set a 3D transformation <code>perspective</code> for a given HTML element. No default value.</li>
<li><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML element. This option has no default value and only accepts valid CSS values according to it's specs.</li>
<li><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML element. This option has no default value and only accepts valid CSS values according to
it's specs.</li>
<li><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation. No default value.</li>
<li><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for the parent of the HTML element subject to the transform animation. Also like the above similar options, this options only accepts
valid CSS values and has no default value.</li>
<li><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with
the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's
default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a <kbd class="bg-olive">svgTransform</kbd> property, it can also accept array values: <code>transformOrigin: [250,250]</code>.
There is no default value but the SVG Plugin will always use <code>50% 50%</code> for your transform tweens.</li>
<li><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for the parent of the HTML element subject to the transform animation. Also like the above similar
options, this options only accepts valid CSS values and has no default value.</li>
<li><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to
SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always
think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a
<kbd class="bg-olive">svgTransform</kbd> property, it can also accept array values: <code>transformOrigin: [250,250]</code>. There is no default value but the SVG Plugin will always use
<code>50% 50%</code> for your transform tweens.</li>
</ul>
<h3>SVG Plugin Options</h3>
@ -127,7 +131,8 @@
</ul>
<h3>Text Plugin Options</h3>
<p>The only option for the plugin is the <kbd>textChars</kbd> option for the <kbd class="bg-olive">text</kbd> property and allows you to set the characters set for the scrambling character during the animation. See <a href="text.html">Text Plugin</a> page for more instructions and demo.</p>
<p>The only option for the plugin is the <kbd>textChars</kbd> option for the <kbd class="bg-olive">text</kbd> property and allows you to set the characters set for the scrambling character during the animation.
See <a href="text.html">Text Plugin</a> page for more instructions and demo.</p>
<h3>Callback Options</h3>
<p>These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.</p>
@ -150,8 +155,8 @@ var callback = function(){
KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
</code></pre>
<h3>Other Options</h3>
<p><kbd>keepHex: true</kbd> option allows you to always use <code>HEX</code> color format, even if you have used <code>RGB</code> or <code>RGBA</code>. This option is useful when tweening color properties on legacy browsers, however modern browsers
may ignore this option for performance reasons.</p>
<p><kbd>keepHex: true</kbd> option allows you to always use <code>HEX</code> color format, even if you have used <code>RGB</code> or <code>RGBA</code>. This option is useful when tweening color properties on
legacy browsers, however modern browsers may ignore this option for performance reasons.</p>
<h3>Override Default Options' Values</h3>
<p>Most options have a default value as you can see above, they are globally defined in the <code>KUTE.defaultOptions</code> object like so:</p>

263
properties.html
View file

@ -82,25 +82,30 @@
<div class="content-wrap">
<h2>Supported Properties</h2>
<p>KUTE.js covers all animation needs by itself for <code>transform</code> properties, <code>scroll</code> for window or a given element, colors. Note: not all browsers support <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a>. With the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like <code>border-radius</code>,
<code>clip</code>, <code>backgroundPosition</code> and more box model properties.</p>
<p>Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular coding, KUTE.js makes it easy to add support for additional
properties, so check out the guide on <a href="extend.html">how to extend</a>.</p>
<p>All common measurement units are supported: <code>px</code> and <code>%</code> for translations and box-model properties, or <code>deg</code> and <code>rad</code> for rotations and skews, while <code>clip</code> only supports <code>px</code>.
Other properties such as <code>opacity</code>, <code>scale</code> or <code>scroll</code> are unitless, and <code>background-position</code> always uses <code>%</code> as measurement unit. As for the text properties you can use <code>px</code>,
<code>em</code>, <code>rem</code>, <code>vh</code> and <code>vw</code>. Be sure to <a href="http://caniuse.com/#feat=viewport-units" target="_blank">check</a> what your browsers support in terms of measurement unit.</p>
<p>KUTE.js covers all animation needs by itself for <code>transform</code> properties, <code>scroll</code> for window or a given element, colors. Note: not all browsers support
<a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a>. With
the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like <code>border-radius</code>, <code>clip</code>,
<code>backgroundPosition</code> and more box model properties.</p>
<p>Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular
coding, KUTE.js makes it easy to add support for additional properties, so check out the guide on <a href="extend.html">how to extend</a>.</p>
<p>All common measurement units are supported: <code>px</code> and <code>%</code> for translations and box-model properties, or <code>deg</code> and <code>rad</code> for rotations and
skews, while <code>clip</code> only supports <code>px</code>. Other properties such as <code>opacity</code>, <code>scale</code> or <code>scroll</code> are unitless, and
<code>background-position</code> always uses <code>%</code> as measurement unit. As for the text properties you can use <code>px</code>, <code>em</code>, <code>rem</code>,
<code>vh</code> and <code>vw</code>. Be sure to <a href="http://caniuse.com/#feat=viewport-units" target="_blank">check</a> what your browsers support in terms of measurement unit.</p>
<h3>Opacity</h3>
<p>In most cases, the best animation possible is the <code class="bg-blue">opacity</code>, for performance, aesthetics and maybe more other reasons such as avoiding unwanted layout changes. KUTE.js also covers IE8 here with the help of proprietary
synthax <code>filter: alpha(opacity=0)</code>. Also, opacity can be used for instance on legacy browsers that don't support <code>RGBA</code> colors. Eg. <code>opacity:0.5</code> will make an element semitransparent.</p>
<p>In most cases, the best animation possible is the <code class="bg-blue">opacity</code>, for performance, aesthetics and maybe more other reasons such as avoiding unwanted layout changes.
KUTE.js also covers IE8 here with the help of proprietary synthax <code>filter: alpha(opacity=0)</code>. Also, opacity can be used for instance on legacy browsers that don't support
<code>RGBA</code> colors. Eg. <code>opacity:0.5</code> will make an element semitransparent.</p>
<h3>2D Transform Properties</h3>
<p>The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage based translation to pixels and radians based angles
to degrees, to help improve memory efficiency.</p>
<p>The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage
based translation to pixels and radians based angles to degrees, to help improve memory efficiency.</p>
<ul>
<li><kbd class="bg-blue">translate</kbd> property can be used for horizontal and / or vertical movement. EG. <code>translate:150</code> to translate an element 150px to the right or <code>translate:[-150,200]</code> to move the element to
the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">rotate</kbd> property applies rotation to an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">translate</kbd> property can be used for horizontal and / or vertical movement. EG. <code>translate:150</code> to translate an element 150px to the right or
<code>translate:[-150,200]</code> to move the element to the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">rotate</kbd> property applies rotation to an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees.
<kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">skewX</kbd> property applies a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew an element by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">skewY</kbd> property applies a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew an element by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">scale</kbd> property applies a single value size transformation. Eg. <code>scale:2</code> will enlarge an element by a degree of 2. <kbd class="bg-lime">IE9+</kbd></li>
@ -108,28 +113,32 @@
</ul>
<h3>3D Transform Properties</h3>
<p>The core engine supports all 3D transform properties except <code>matrix3d</code> and <code>rotate3d</code>. Just as the above, these properties' values are also converted to traditional pixels and degrees measurements to help improve memory
usage.</p>
<p>The core engine supports all 3D transform properties except <code>matrix3d</code> and <code>rotate3d</code>. Just as the above, these properties' values are also converted to traditional pixels
and degrees measurements to help improve memory usage.</p>
<ul>
<li><kbd class="bg-blue">translateX</kbd> property is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translateY</kbd> property is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translateZ</kbd> property is for translation on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px to it's back, making it smaller. Requires a <code>perspective</code> tween
option to be used; the smaller perspective value, the deeper translation. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translate3d</kbd> property is for movement on all the axis in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer,
making it larger. Also requires using a <code>perspective</code> tween option. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateX</kbd> property rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees. Requires perspective. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateY</kbd> property rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees. Requires perspective. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateZ</kbd> property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:-150</code> will rotate an element counter-clockwise by 150 degrees. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translateZ</kbd> property is for translation on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px to it's back, making it smaller.
Requires a <code>perspective</code> tween option to be used; the smaller perspective value, the deeper translation. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translate3d</kbd> property is for movement on all the axis in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> to translate an element 150px to the left, 200px
to the bottom and 150px closer to the viewer, making it larger. Also requires using a <code>perspective</code> tween option. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateX</kbd> property rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees. Requires perspective.
<kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateY</kbd> property rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees.
Requires perspective. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateZ</kbd> property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:-150</code> will rotate an element counter-clockwise by
150 degrees. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-red">matrix3d</kbd>, <kbd class="bg-red">rotate3d</kbd>, and <kbd class="bg-red">scale3d</kbd> properties are not supported.</li>
</ul>
<h3>SVG Transform</h3>
<p>The <a href="svg.html">SVG Plugin</a> features cross browser 2D transform animations via the <kbd class="bg-olive">svgTransform</kbd> tween property and the <code>transform</code> presentation attribute, similar in functionality as the Attributes
Plugin.</p>
<p>The <a href="svg.html">SVG Plugin</a> features cross browser 2D transform animations via the <kbd class="bg-olive">svgTransform</kbd> tween property and the <code>transform</code> presentation attribute,
similar in functionality as the Attributes Plugin.</p>
<ul>
<li><kbd class="bg-olive">translate</kbd> sub-property applies horizontal and / or vertical translation. EG. <code>translate:150</code> to translate a shape 150px to the right or <code>translate:[-150,200]</code> to move the element to the
left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">rotate</kbd> sub-property applies rotation to a shape on the Z axis. Eg. <code>rotate:150</code> will rotate a shape clockwise by 150 degrees around it's own center or around the <code>transformOrigin: '450 450'</code> set tween option coordinate of the parent element. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">translate</kbd> sub-property applies horizontal and / or vertical translation. EG. <code>translate:150</code> to translate a shape 150px to the right or
<code>translate:[-150,200]</code> to move the element to the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">rotate</kbd> sub-property applies rotation to a shape on the Z axis. Eg. <code>rotate:150</code> will rotate a shape clockwise by 150 degrees around it's own center or around
the <code>transformOrigin: '450 450'</code> set tween option coordinate of the parent element. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">skewX</kbd> sub-property used to apply a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">skewY</kbd> sub-property used to apply a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">scale</kbd> sub-property used to apply a single value size transformation. Eg. <code>scale:0.5</code> will scale a shape to half of it's initial size. <kbd class="bg-lime">IE9+</kbd></li>
@ -138,113 +147,119 @@
<p>As a quick note, the translation is normalized and computed in a way to handle the <code>transformOrigin</code> tween option in all cases, not just for rotations, but also scaling or skews.</p>
<h3>SVG Properties</h3>
<p>The <a href="svg.html">SVG Plugin</a> can animate the <code>d</code> attribute of a given <code>&lt;path&gt;</code> or <code>&lt;glyph&gt;</code> element with the tween property called <kbd class="bg-olive">path</kbd>. The animation effect
is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to <a href="http://bl.ocks.org/mbostock/3081153" target="_blank">the D3.js examples</a> for wider usability and the ability to
optimize the visual and performance of the morph, all with the help of special tween options and utilities.</p>
<p>The <a href="svg.html">SVG Plugin</a> can animate the <code>d</code> attribute of a given <code>&lt;path&gt;</code> or <code>&lt;glyph&gt;</code> element with the tween property called
<kbd class="bg-olive">path</kbd>. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to
<a href="http://bl.ocks.org/mbostock/3081153" target="_blank">the D3.js examples</a> for wider usability and the ability to optimize the visual and performance of the morph, all with the help of special
tween options and utilities.</p>
<p>Further more, the SVG Plugin can animate the stroke in a way that you probably know as <code>drawSVG</code>. KUTE.js implements it as <kbd class="bg-olive">draw</kbd> tween property that deals with the well known CSS properties: <kbd>strokeDasharray</kbd> and <kbd>strokeDashoffset</kbd>.
<p>Further more, the SVG Plugin can animate the stroke in a way that you probably know as <code>drawSVG</code>. KUTE.js implements it as <kbd class="bg-olive">draw</kbd> tween property that deals with the
well known CSS properties: <kbd>strokeDasharray</kbd> and <kbd>strokeDashoffset</kbd>.</p>
<h3>Box Model Properties</h3>
<p>The core engine supports <code>width</code>, <code>height</code>, <code>left</code> and <code>top</code> while the <a href="css.html">CSS Plugin</a> adds support for all other box-model properties.</p>
<ul>
<li><kbd class="bg-blue">left</kbd>, <kbd class="bg-blue">top</kbd>, <kbd class="bg-olive">right</kbd> and <kbd class="bg-olive">bottom</kbd> are <code>position</code> based properties for movement on vertical and / or horizontal axis.
These properties require that the element to animate uses <code>position: absolute/relative</code> styling as well as it's parent element requires <code>position:relative</code>. These properties can be used as fallback for browsers
with no support for <code>translate</code> properties such as IE8.</li>
<li><kbd class="bg-blue">width</kbd>, <kbd class="bg-blue">height</kbd>, <kbd class="bg-olive">minWidth</kbd>, <kbd class="bg-olive">minHeight</kbd>, <kbd class="bg-olive">maxWidth</kbd>, <kbd class="bg-olive">maxHeight</kbd> are properties
that allow you to animate the size of an element on horizontal and / or vertical axis. These properties can be used on images as fallback for <code>scale</code> on IE8 again, as well as for other purposes.</li>
<li><kbd class="bg-olive">padding</kbd>, <kbd class="bg-olive">margin</kbd>, <kbd class="bg-olive">paddingTop</kbd>, <kbd class="bg-olive">paddingBottom</kbd>, <kbd class="bg-olive">paddingLeft</kbd>, <kbd class="bg-olive">paddingRight</kbd>,
<kbd class="bg-olive">marginTop</kbd>, <kbd class="bg-olive">marginBottom</kbd>, <kbd class="bg-olive">marginLeft</kbd> and <kbd class="bg-olive">marginRight</kbd> are properties that allow you to animate the spacing of an element
inside (via padding) and outside (via margin). Shorthand notations such as <code>margin: "20px 50px"</code> or any other type are not supported.</li>
<li><kbd class="bg-olive">borderWidth</kbd>, <kbd class="bg-olive">borderTopWidth</kbd>, <kbd class="bg-olive">borderRightWidth</kbd>, <kbd class="bg-olive">borderBottomWidth</kbd> are <kbd class="bg-olive">borderLeftWidth</kbd> are properties
that allow you to animate the border of an element either on all sides at once or each side separatelly. Shorthand notations are not supported.</li>
<li><kbd class="bg-olive">outlineWidth</kbd> property allows you to animate the <code>outline-width</code> of an element.</li>
</ul>
<p>As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the <code>element.offsetWidth</code> as a refference. The idea is
the same as presented on the above supported transform properties.</p>
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong> that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger <code>resize</code> event
that may cause crashes on old browsers such as IE8 when using handlers bound on <code>resize</code>, so use with caution.</p>
<h3>Box Model Properties</h3>
<p>The core engine supports <code>width</code>, <code>height</code>, <code>left</code> and <code>top</code> while the <a href="css.html">CSS Plugin</a> adds support for all other box-model properties.</p>
<ul>
<li><kbd class="bg-blue">left</kbd>, <kbd class="bg-blue">top</kbd>, <kbd class="bg-olive">right</kbd> and <kbd class="bg-olive">bottom</kbd> are <code>position</code> based properties for movement on
vertical and / or horizontal axis. These properties require that the element to animate uses <code>position: absolute/relative</code> styling as well as it's parent element requires
<code>position:relative</code>. These properties can be used as fallback for browsers with no support for <code>translate</code> properties such as IE8.</li>
<li><kbd class="bg-blue">width</kbd>, <kbd class="bg-blue">height</kbd>, <kbd class="bg-olive">minWidth</kbd>, <kbd class="bg-olive">minHeight</kbd>, <kbd class="bg-olive">maxWidth</kbd>,
<kbd class="bg-olive">maxHeight</kbd> are properties that allow you to animate the size of an element on horizontal and / or vertical axis. These properties can be used on images as fallback for
<code>scale</code> on IE8 again, as well as for other purposes.</li>
<li><kbd class="bg-olive">padding</kbd>, <kbd class="bg-olive">margin</kbd>, <kbd class="bg-olive">paddingTop</kbd>, <kbd class="bg-olive">paddingBottom</kbd>, <kbd class="bg-olive">paddingLeft</kbd>,
<kbd class="bg-olive">paddingRight</kbd>, <kbd class="bg-olive">marginTop</kbd>, <kbd class="bg-olive">marginBottom</kbd>, <kbd class="bg-olive">marginLeft</kbd> and
<kbd class="bg-olive">marginRight</kbd> are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as
<code>margin: "20px 50px"</code> or any other type are not supported.</li>
<li><kbd class="bg-olive">borderWidth</kbd>, <kbd class="bg-olive">borderTopWidth</kbd>, <kbd class="bg-olive">borderRightWidth</kbd>, <kbd class="bg-olive">borderBottomWidth</kbd> are
<kbd class="bg-olive">borderLeftWidth</kbd> are properties that allow you to animate the border of an element either on all sides at once or each side separatelly. Shorthand notations are not supported.</li>
<li><kbd class="bg-olive">outlineWidth</kbd> property allows you to animate the <code>outline-width</code> of an element.</li>
</ul>
<p>As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the <code>element.offsetWidth</code>
as a refference. The idea is the same as presented on the above supported transform properties.</p>
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong> that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices.
They also trigger <code>resize</code> event that may cause crashes on old browsers such as IE8 when using handlers bound on <code>resize</code>, so use with caution.</p>
<h3>Border Radius</h3>
<p>The <a href="css.html">CSS Plugin</a> covers all the radius properties with the exception that shorthand notations are not implemented.</p>
<ul>
<li><kbd class="bg-olive">borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
<li><kbd class="bg-olive">borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
<li><kbd class="bg-olive">borderTopRightRadius</kbd> allows you to animate the <code>border-top-right-radius</code> for a given element.</li>
<li><kbd class="bg-olive">borderBottomLeftRadius</kbd> allows you to animate the <code>border-bottom-left-radius</code>for a given element.</li>
<li><kbd class="bg-olive">borderBottomRightRadius</kbd> allows you to animate the <code>border-bottom-right-radius</code>for a given element.</li>
</ul>
<p>For all radius properties above <code>borderRadius:20</code> or <code>borderTopLeftRadius:'25%'</code> will do. In the first case <code>px</code> is the default measurement unit used, while in the second we require using <code>%</code> unit which is relative to the element's size.</p>
<p><strong>Remember</strong>: shorthands for <code>border-radius</code> are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. <code>-moz-border-radius-topleft</code>) as they were deprecated with later
versions.</p>
<h3>Border Radius</h3>
<p>The <a href="css.html">CSS Plugin</a> covers all the radius properties with the exception that shorthand notations are not implemented.</p>
<ul>
<li><kbd class="bg-olive">borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
<li><kbd class="bg-olive">borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
<li><kbd class="bg-olive">borderTopRightRadius</kbd> allows you to animate the <code>border-top-right-radius</code> for a given element.</li>
<li><kbd class="bg-olive">borderBottomLeftRadius</kbd> allows you to animate the <code>border-bottom-left-radius</code>for a given element.</li>
<li><kbd class="bg-olive">borderBottomRightRadius</kbd> allows you to animate the <code>border-bottom-right-radius</code>for a given element.</li>
</ul>
<p>For all radius properties above <code>borderRadius:20</code> or <code>borderTopLeftRadius:'25%'</code> will do. In the first case <code>px</code> is the default measurement unit used, while in the second we
require using <code>%</code> unit which is relative to the element's size.</p>
<p><strong>Remember</strong>: shorthands for <code>border-radius</code> are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. <code>-moz-border-radius-topleft</code>)
as they were deprecated with later versions.</p>
<h3>Color Properties</h3>
<p>The core engine only supports <code>color</code> and <code>backgroundColor</code>, but the <a href="css.html">CSS Plugin</a> covers all the others. KUTE.js currently supports values such as <code>HEX</code>, <code>RGB</code> and <code>RGBA</code> for all color properties, but IE8 does not support <code>RGBA</code> and always uses <code>RGB</code> when detected, otherwise will produce no effect. There is also a tween option <code>keepHex:true</code> to convert the color format.
Eg. <code>color: '#ff0000'</code> or <code>backgroundColor: 'rgb(202,150,20)'</code> or <code>borderColor: 'rgba(250,100,20,0.5)'</code>. The IE9+ browsers should also work with
<a href="http://www.w3schools.com/colors/colors_names.asp"
target="_blank">web safe colors</a>, eg. <code>color: 'red'</code>. </p>
<ul>
<li><kbd class="bg-blue">color</kbd> allows you to animate the color for a given text element.</li>
<li><kbd class="bg-blue">backgroundColor</kbd> allows you to animate the <code>background-color</code> for a given element.</li>
<li><kbd class="bg-olive">outlineColor</kbd> allows you to animate the <code>outline-color</code> for a given element.</li>
<li><kbd class="bg-olive">borderColor</kbd> allows you to animate the <code>border-color</code> on all sides for a given element.</li>
<li><kbd class="bg-olive">borderTopColor</kbd>, <kbd class="bg-olive">borderRightColor</kbd>, <kbd class="bg-olive">borderBottomColor</kbd> and <kbd class="bg-olive">borderLeftColor</kbd> properties allow you to animate the color of the
border on each side of a given element.</li>
</ul>
<p><strong>Remember</strong>: shorthands for <code>borderColor</code> property are not supported.</p>
<h3>Color Properties</h3>
<p>The core engine only supports <code>color</code> and <code>backgroundColor</code>, but the <a href="css.html">CSS Plugin</a> covers all the others. KUTE.js currently supports values such as <code>HEX</code>,
<code>RGB</code> and <code>RGBA</code> for all color properties, but IE8 does not support <code>RGBA</code> and always uses <code>RGB</code> when detected, otherwise will produce no effect. There is also a
tween option <code>keepHex:true</code> to convert the color format. Eg. <code>color: '#ff0000'</code> or <code>backgroundColor: 'rgb(202,150,20)'</code> or <code>borderColor: 'rgba(250,100,20,0.5)'</code>.
The IE9+ browsers should also work with <a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">web safe colors</a>, eg. <code>color: 'red'</code>. </p>
<ul>
<li><kbd class="bg-blue">color</kbd> allows you to animate the color for a given text element.</li>
<li><kbd class="bg-blue">backgroundColor</kbd> allows you to animate the <code>background-color</code> for a given element.</li>
<li><kbd class="bg-olive">outlineColor</kbd> allows you to animate the <code>outline-color</code> for a given element.</li>
<li><kbd class="bg-olive">borderColor</kbd> allows you to animate the <code>border-color</code> on all sides for a given element.</li>
<li><kbd class="bg-olive">borderTopColor</kbd>, <kbd class="bg-olive">borderRightColor</kbd>, <kbd class="bg-olive">borderBottomColor</kbd> and <kbd class="bg-olive">borderLeftColor</kbd> properties allow
you to animate the color of the border on each side of a given element.</li>
</ul>
<p><strong>Remember</strong>: shorthands for <code>borderColor</code> property are not supported.</p>
<h3>Presentation Attributes</h3>
<p>The <a href="attr.html">Attributes Plugin</a> can animate any numerical presentation attribute such as <kbd class="bg-olive">width</kbd>, <kbd class="bg-olive">cx</kbd> or <kbd class="bg-olive">stop-opacity</kbd>, but the values can be
also suffixed: <code>150px</code> or <code>50%</code>, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the
above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.</p>
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or <kbd class="bg-olive">stop-color</kbd>, and they are
removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.
<p>
<p>The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc).
For instance <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
<p>The plugin handles attribute namespaces properly which means you can use both Javascript notation (like <kbd class="bg-olive">stopColor</kbd>) and HTML markup notation (like <kbd class="bg-olive">'stop-color'</kbd>), see the below
example.</p>
<p>EG: <code>KUTE.to('selector', {attr:{stroke:'blue'}})</code> to animate the stroke of an SVG element or <code>KUTE.to('selector', {attr:{'stop-color':'red'}})</code> to animate the stop color of some SVG gradient.</p>
<h3>Presentation Attributes</h3>
<p>The <a href="attr.html">Attributes Plugin</a> can animate any numerical presentation attribute such as <kbd class="bg-olive">width</kbd>, <kbd class="bg-olive">cx</kbd> or <kbd class="bg-olive">stop-opacity</kbd>,
but the values can be also suffixed: <code>150px</code> or <code>50%</code>, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute.
This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.</p>
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or
<kbd class="bg-olive">stop-color</kbd>, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.</p>
<h3>Typography Properties</h3>
<p>The <a href="css.html">CSS Plugin</a> also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code> on browsers that
don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>
<ul>
<li><kbd class="bg-olive">fontSize</kbd> allows you to animate the <code>font-size</code> for a given element.</li>
<li><kbd class="bg-olive">lineHeight</kbd> allows you to animate the <code>line-height</code> for a given element.</li>
<li><kbd class="bg-olive">letterSpacing</kbd> allows you to animate the <code>letter-spacing</code> for a given element.</li>
<li><kbd class="bg-olive">wordSpacing</kbd> allows you to animate the <code>word-spacing</code> for a given element.</li>
</ul>
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong>.</p>
<p>The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a
suffix (%,px,etc). For instance <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
<p>The plugin handles attribute namespaces properly which means you can use both Javascript notation (like <kbd class="bg-olive">stopColor</kbd>) and HTML markup notation (like <kbd class="bg-olive">'stop-color'</kbd>),
see the below example.</p>
<p>EG: <code>KUTE.to('selector', {attr:{stroke:'blue'}})</code> to animate the stroke of an SVG element or <code>KUTE.to('selector', {attr:{'stop-color':'red'}})</code> to animate the stop color of some SVG gradient.</p>
<h3>Scroll Animation</h3>
<p>KUTE.js core engine currently supports only vertical <kbd class="bg-blue">scroll</kbd> for both the window and a given element that's scrollable (when <code>scrollHeight</code> is higher than <code>offsetHeight</code>). EG: <code>scroll: 150</code> will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks, but we'll have a look at that
later.</p>
<h3>Typography Properties</h3>
<p>The <a href="css.html">CSS Plugin</a> also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code>
on browsers that don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>
<ul>
<li><kbd class="bg-olive">fontSize</kbd> allows you to animate the <code>font-size</code> for a given element.</li>
<li><kbd class="bg-olive">lineHeight</kbd> allows you to animate the <code>line-height</code> for a given element.</li>
<li><kbd class="bg-olive">letterSpacing</kbd> allows you to animate the <code>letter-spacing</code> for a given element.</li>
<li><kbd class="bg-olive">wordSpacing</kbd> allows you to animate the <code>word-spacing</code> for a given element.</li>
</ul>
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong>.</p>
<h3>String Properties</h3>
<ul>
<li><kbd class="bg-olive">number</kbd> allows you to tween a number either from 0 or from a current value and updates the <code>innerHTML</code> for a given target. Eg. <code>number:1500</code></li>
<li><kbd class="bg-olive">text</kbd> allows you to write a string one character at a time followed by a scrambling character. Eg. <code>text: 'A demo with &lt;b>substring&lt;/b>'</code>. </li>
</ul>
<p>See <a href="text.html">Text Plugin</a> for details.</p>
<h3>Scroll Animation</h3>
<p>KUTE.js core engine currently supports only vertical <kbd class="bg-blue">scroll</kbd> for both the window and a given element that's scrollable (when <code>scrollHeight</code> is higher than
<code>offsetHeight</code>). EG: <code>scroll: 150</code> will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent
animation bubbles as well as scroll bottlenecks, but we'll have a look at that later.</p>
<h3>Other Properties</h3>
<ul>
<li><kbd class="bg-olive">clip</kbd> allows you to animate the <code>clip</code> property for a given element. Only rect is supported. Eg. <code>clip:[250,200,300,0]</code>. See
<a href="http://www.w3.org/TR/CSS2/visufx.html#propdef-clip"
target="_blank">spec</a> for details.</li>
<li><kbd class="bg-olive">backgroundPosition</kbd> allows you to animate the <code>background-position</code> for a given element that uses a background image. It only uses % as measurement unit. Eg. <code>backgroundPosition:[50,20]</code></li>
</ul>
<h3>String Properties</h3>
<ul>
<li><kbd class="bg-olive">number</kbd> allows you to tween a number either from 0 or from a current value and updates the <code>innerHTML</code> for a given target. Eg. <code>number:1500</code></li>
<li><kbd class="bg-olive">text</kbd> allows you to write a string one character at a time followed by a scrambling character. Eg. <code>text: 'A demo with &lt;b>substring&lt;/b>'</code>. </li>
</ul>
<p>See <a href="text.html">Text Plugin</a> for details.</p>
<h3>Legend</h3>
<ul>
<li><kbd class="bg-blue">core</kbd> - the property/properties are supported by core animation engine.</li>
<li><kbd class="bg-olive">plugin</kbd> - the property/properties are supported by plugins.</li>
<li><kbd class="bg-red">unsupported</kbd> - the property/properties are NOT supported by core and/or plugins.</li>
</ul>
<h3>Other Properties</h3>
<ul>
<li><kbd class="bg-olive">clip</kbd> allows you to animate the <code>clip</code> property for a given element. Only rect is supported. Eg. <code>clip:[250,200,300,0]</code>. See
<a href="http://www.w3.org/TR/CSS2/visufx.html#propdef-clip" target="_blank">spec</a> for details.</li>
<li><kbd class="bg-olive">backgroundPosition</kbd> allows you to animate the <code>background-position</code> for a given element that uses a background image. It only uses % as measurement unit.
Eg. <code>backgroundPosition:[50,20]</code></li>
</ul>
<h3>Did We Miss Any Important Property?</h3>
<p>Make sure you go to <a href="https://github.com/thednp/kute.js/issues" target="_blank">the issues tracker</a> and report the missing property ASAP, or you can check the <a href="extend.html">extend</a> guide and learn how to develop
a plugin to support a new property yourself.</p>
<h3>Legend</h3>
<ul>
<li><kbd class="bg-blue">core</kbd> - the property/properties are supported by core animation engine.</li>
<li><kbd class="bg-olive">plugin</kbd> - the property/properties are supported by plugins.</li>
<li><kbd class="bg-red">unsupported</kbd> - the property/properties are NOT supported by core and/or plugins.</li>
</ul>
<h3>Did We Miss Any Important Property?</h3>
<p>Make sure you go to <a href="https://github.com/thednp/kute.js/issues" target="_blank">the issues tracker</a> and report the missing property ASAP, or you can check the <a href="extend.html">extend</a>
guide and learn how to develop a plugin to support a new property yourself.</p>
</div>
<div class="content-wrap">

17
start.html
View file

@ -86,7 +86,8 @@
<div class="content-wrap">
<h2>Getting Started</h2>
<p>Welcome to KUTE.js API documentation, here we're going to talk about how to download, install, use, control and set up cross browser animations, in great detail. KUTE.js can be found on <a href="http://www.jsdelivr.com/#!kute.js" target="_blank">CDN</a> and also npm and Bower repositories with all it's features and tools.</p>
<p>Welcome to KUTE.js API documentation, here we're going to talk about how to download, install, use, control and set up cross browser animations, in great detail. KUTE.js can be found on
<a href="http://www.jsdelivr.com/#!kute.js" target="_blank">CDN</a> and also npm and Bower repositories with all it's features and tools.</p>
<h3>Bower and NPM</h3>
<p>You can install KUTE.js package by using either Bower or NPM.</p>
@ -123,8 +124,8 @@ define([
<p>An alternate CDN link here:</p>
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>The CDN repositories receive latest updates <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a> and <a href="https://cdnjs.com/libraries/kute.js" target="_blank">right here</a>. You might also want to include the tools that
you need for your project:</p>
<p>The CDN repositories receive latest updates <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a> and <a href="https://cdnjs.com/libraries/kute.js" target="_blank">right here</a>.
You might also want to include the tools that you need for your project:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
@ -141,10 +142,12 @@ define([
<p>Your awesome animation coding would follow after these script links.</p>
<h3>Targeting Legacy Browsers</h3>
<p>You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers actually support. A quick note here: IE8 doesn't support any <code>transform</code> property or <code>RGBA</code> colors while IE9 can only
do 2D transformations. Check the <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> and the <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a> browser support list for more
information.</p>
<p>Don't use <a href="https://modernizr.com/" target="_blank">Modernizr</a>, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and <a target="_blank" href="http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">here is the full refference</a> on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: <a href="http://browserhacks.com/" target="_blank">there you go</a>.</p>
<p>You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers actually support. A quick note here: IE8 doesn't support any <code>transform</code> property or
<code>RGBA</code> colors while IE9 can only do 2D transformations. Check the <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> and the
<a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a> browser support list for more information.</p>
<p>Don't use <a href="https://modernizr.com/" target="_blank">Modernizr</a>, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and
<a target="_blank" href="http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">here is the full refference</a> on that. For other legacy browsers there is a ton of ways
to target them, quite efficiently I would say: <a href="http://browserhacks.com/" target="_blank">there you go</a>.</p>
<ul id="share" class="nav">

254
svg.html
View file

@ -142,8 +142,8 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<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>
<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>
<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
@ -159,10 +159,12 @@ var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864
<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>
<p>The plugin will try to convert paths to absolute values for polygons, but it might not find most accurate coordinates values for relative <code>v</code> and <code>h</code> path commands. I highly recommend using my <a href="http://codepen.io/thednp/full/EgVqLw/">utility converter</a> to prepare your paths in that case.</p>
<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>
<p>The plugin will try to convert paths to absolute values for polygons, but it might not find most accurate coordinates values for relative <code>v</code> and <code>h</code> path commands. I highly
recommend using my <a href="http://codepen.io/thednp/full/EgVqLw/">utility converter</a> to prepare your paths in that case.</p>
<pre><code class="language-javascript">// let's morph a triangle into a star
var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
@ -170,46 +172,48 @@ var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
</code></pre>
<p>In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each tween the morph will use the number of
points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.</p>
<p>In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each
tween the morph will use the number of points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="square" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z"/>
<path id="square" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z"/>
<path id="square2" style="visibility:hidden" d="M25.508,12.011 H576.715 V584.766 H25.508 V12.011z"/>
<path id="square3" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 V584.766 L25.508,584.766 V12.011 z"/>
<path id="square2" style="visibility:hidden" d="M25.508,12.011 H576.715 V584.766 H25.508 V12.011z"/>
<path id="square3" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 V584.766 L25.508,584.766 V12.011 z"/>
<path id="triangle" fill="#673AB7" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
<path id="triangle" fill="#673AB7" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
<path id="star2" 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>
<path id="star2" 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>
<div class="example-buttons">
<a id="morphBtn2" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only <code>L</code> path command will make sure to prevent value processing and allow the animation to start as
fast as possible.</p>
<p>The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only <code>L</code> path command will make sure to prevent value processing
and allow the animation to start as fast as possible.</p>
<h4>Multi Path Example</h4>
<p>In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:</p>
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
&lt;path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z
M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z
M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z
M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
&lt;path d="M0.175 256l-0.175-156.037 192-26.072v182.109z
M224 69.241l255.936-37.241v224h-255.936z
M479.999 288l-0.063 224-255.936-36.008v-187.992z
M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
&lt;path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z
M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z
M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z
M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
&lt;path d="M0.175 256l-0.175-156.037 192-26.072v182.109z
M224 69.241l255.936-37.241v224h-255.936z
M479.999 288l-0.063 224-255.936-36.008v-187.992z
M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
&lt;/svg>
</code></pre>
<p>As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.</p>
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
&lt;path id="w11" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
&lt;path id="w12" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
&lt;path id="w13" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
@ -221,9 +225,11 @@ var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
&lt;path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
&lt;/svg>
</code></pre>
<p>After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: <code>#w11</code> to <code>#w24</code>, <code>#w13</code> to <code>#w21</code>, <code>#w14</code> to <code>#w22</code> and <code>#w12</code> to <code>#w23</code>.</p>
<p>After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: <code>#w11</code>
to <code>#w24</code>, <code>#w13</code> to <code>#w21</code>, <code>#w14</code> to <code>#w22</code> and <code>#w12</code> to <code>#w23</code>.</p>
<p>Now we can write the tween objects and get to working:</p>
<pre><code class="language-javascript">var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
<pre><code class="language-javascript">var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
var multiMorph2 = KUTE.to('#w13', { path: '#w21' }).start();
var multiMorph3 = KUTE.to('#w14', { path: '#w22' }).start();
var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
@ -248,14 +254,15 @@ var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
<a id="multiMorphBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Note that this final touch required using <code>reverseSecondPath:true</code> option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the <a href="assets/js/svg.js" target="_blank">svg.js</a> for a full code review.</p>
<p>Note that this final touch required using <code>reverseSecondPath:true</code> option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to
check the <a href="assets/js/svg.js" target="_blank">svg.js</a> for a full code review.</p>
<h4>Complex Example</h4>
<p>The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant differences of their positions. In this case
you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you
should be just like in the previous example.</p>
<p>An important aspect of multi path morph is syncronization: since the <code>.to()</code> method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, the problem can be easily solved as always using
the <code>.fromTo()</code> method. So, let's get into it:</p>
<p>The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant
differences of their positions. In this case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure
the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example.</p>
<p>An important aspect of multi path morph is syncronization: since the <code>.to()</code> method will prepare the paths for interpolation at animation start, and this usually takes a bit of time,
the problem can be easily solved as always using the <code>.fromTo()</code> method. So, let's get into it:</p>
<pre><code class="language-javascript">// complex multi morph, the paths should be self explanatory
var morph1 = KUTE.fromTo('#start-container', { path: '#start-container' }, { path: '#end-container' });
@ -263,7 +270,8 @@ var morph2 = KUTE.fromTo('#startpath1', { path: '#startpath1' }, {
var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' }, { path: '#endpath1' });
var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, { path: '#endpath2' });
</code></pre>
<p>As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next example, we have used a <code>mask</code> where we included the subpaths of both start and end shape, just to get the same visual as the originals.</p>
<p>As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next
example, we have used a <code>mask</code> where we included the subpaths of both start and end shape, just to get the same visual as the originals.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
@ -285,28 +293,30 @@ var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, {
<a id="compliMorphBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a
lighter script, it might be a better solution for your applications.</p>
<p>So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates
for tween, it's super light, it's a lighter script, it might be a better solution for your applications.</p>
<h4>Recommendations</h4>
<ul>
<li>The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.</li>
<li>When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget
about mobile devices.</li>
<li>Large displays would need best resolution possible so a small <code>morphPrecision</code> value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost
any value, including the default value.</li>
<li>When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the
overal animation performance, don't forget about mobile devices.</li>
<li>Large displays would need best resolution possible so a small <code>morphPrecision</code> value (1-10) would be required, assuming performant hardware are powering the displays. For small displays
you can get quite comfortable with almost any value, including the default value.</li>
<li>Polygons with only <code>lineto</code> path commands are best for performance.</li>
<li>Faster animation speed could be a great trick to hide any polygonal "artefacts". Strokes are also very useful for hiding the polygons' edges.</li>
<li>Don't forget about the <a href="http://codepen.io/thednp/pen/YGayLg">path morph utility</a>, it's gonna make your work a lot easier.</li>
<li>The SVG morph performance is the same for both <code>.to()</code> and <code>.fromTo()</code> methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the
processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the <code>.to()</code> based morph will always start later. Of course this assumes the you cache
the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.</li>
<li>The SVG morph performance is the same for both <code>.to()</code> and <code>.fromTo()</code> methods, but the ones that use the second method will start faster, because the values have been prepared
already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the <code>.to()</code>
based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will
be delayed.</li>
</ul>
<h3>Drawing Stroke</h3>
<p>Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <code>&lt;path></code> shapes, <code>&lt;circle></code>, <code>&lt;ellipse></code>, <code>&lt;rect></code>, <code>&lt;line></code>,
<code>&lt;polyline></code> and <code>&lt;polygon></code> shapes are also supported; the script uses the SVG standard <code>.getTotalLength()</code> method for <code>&lt;path></code> shapes, while the others use some helper methods. Here
some code examples:</p>
<p>Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <code>&lt;path></code> shapes, <code>&lt;circle></code>, <code>&lt;ellipse></code>, <code>&lt;rect></code>,
<code>&lt;line></code>, <code>&lt;polyline></code> and <code>&lt;polygon></code> shapes are also supported; the script uses the SVG standard <code>.getTotalLength()</code> method for <code>&lt;path></code>
shapes, while the others use some helper methods. Here some code examples:</p>
<pre><code class="language-javascript">// draw the stroke from 0-10% to 90-100%
var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
@ -316,6 +326,7 @@ var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
// draw the stroke from full length to 50%
var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
</code></pre>
<p>We're gonna chain these tweens and start the animation real quick.</p>
<div class="featurettes">
<svg style="width:600px" class="example-box-model example-box" id="draw-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2046 513">
@ -329,17 +340,20 @@ var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
<a id="drawBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Remember: the <code class="bg-indigo">draw</code> property also accepts absolute values, eg. <code>draw: '0 150'</code>; the <code>.to()</code> method takes <code>0% 100%</code> as start value for your tweens when <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> are not set.</p>
<p>Remember: the <code class="bg-indigo">draw</code> property also accepts absolute values, eg. <code>draw: '0 150'</code>; the <code>.to()</code> method takes <code>0% 100%</code> as start value for your
tweens when <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> are not set.</p>
<h3>SVG Transforms</h3>
<p>Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve most browser inconsistencies. A very simple
roadmap was described <a href="https://github.com/thednp/kute.js/issues/31" target="_blank">here</a>; in brief we needed to find a way to enable SVG transforms in a <a href="https://css-tricks.com/transforms-on-svg-elements/" target="_blank">reliable and cross-browser</a> supported fashion.</p>
<p>With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the <code>transformOrigin</code> just like for CSS3 transforms and secondly the unique way to normalize translation to work
with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with the <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">working draft</a>.</p>
<p>While you can still use regular <a href="examples.html">CSS3 transforms</a> for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based <code>transform-origin</code> values and ALL Internet
Explorer versions have no implementation for CSS3 transforms on SVG elements.</p>
<p>KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the <code>transform</code> presentation attribute and the <code class="bg-indigo">svgTransform</code> tween property with
a special notation:</p>
<p>Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve
most browser inconsistencies. A very simple roadmap was described <a href="https://github.com/thednp/kute.js/issues/31" target="_blank">here</a>; in brief we needed to find a way to enable SVG transforms
in a <a href="https://css-tricks.com/transforms-on-svg-elements/" target="_blank">reliable and cross-browser</a> supported fashion.</p>
<p>With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the <code>transformOrigin</code> just like for CSS3 transforms and secondly the unique
way to normalize translation to work with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with
the <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">working draft</a>.</p>
<p>While you can still use regular <a href="examples.html">CSS3 transforms</a> for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based
<code>transform-origin</code> values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements.</p>
<p>KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the <code>transform</code> presentation attribute and the
<code class="bg-indigo">svgTransform</code> tween property with a special notation:</p>
<pre><code class="language-javascript">// using the svgTransform property works in all SVG enabled browsers
var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }});
@ -348,36 +362,42 @@ var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45,
var tween1 = KUTE.to('shape', { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }, { transformOrigin: '50% 50%' });
</code></pre>
<p>As you can see we have some familiar notation, but an important notice here is that <code class="bg-indigo">svgTransform</code> tween property treat all SVG transform functions as if you are using the <code>50% 50%</code> of the shape box
at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.</p>
<p>Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the <code>transform</code> attribute accepts no measurement units such as degrees or pixels. For these reasons the <code>transformOrigin</code> tween option can also accept array values just in case you need coordinates relative to the parent <code>&lt;svg></code> element. Also values like <i>top left</i> values will work.</p>
<p>In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as <code class="bg-indigo">svgTransform</code> based animations (RIGHT). I highly encourage you to test all of them in all browsers,
and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.</p>
<p>As you can see we have some familiar notation, but an important notice here is that <code class="bg-indigo">svgTransform</code> tween property treat all SVG transform functions as if you are using the
<code>50% 50%</code> of the shape box at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.</p>
<p>Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the <code>transform</code> attribute accepts no measurement units such as degrees
or pixels. For these reasons the <code>transformOrigin</code> tween option can also accept array values just in case you need coordinates relative to the parent <code>&lt;svg></code> element. Also values
like <i>top left</i> values will work.</p>
<p>In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as <code class="bg-indigo">svgTransform</code> based animations (RIGHT). I highly encourage you
to test all of them in all browsers, and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.</p>
<h4>SVG Rotation</h4>
<p>Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the <code class="bg-indigo">svgTransform</code> will only accept single value for the angle value <code>rotate: 45</code>,
the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a <code>transformOrigin</code> tween option to override the behavior.</p>
<p>The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department. Let's have a look at a quick demo:</p>
<p>Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the <code class="bg-indigo">svgTransform</code> will only accept single value
for the angle value <code>rotate: 45</code>, the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a <code>transformOrigin</code>
tween option to override the behavior.</p>
<p>The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department.
Let's have a look at a quick demo:</p>
<div class="featurettes">
<svg id="svgRotate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-olive" 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 class="bg-blue" transform="translate(580)" 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>
</svg>
<path class="bg-olive" 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 class="bg-blue" transform="translate(580)" 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>
</svg>
<div class="example-buttons">
<a id="rotateBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set <code>transformOrigin</code> option to <i>50% 50%</i>, but this animation doesn't work in IE browsers,
while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the <code>rotate: 360</code> notation and the animation shows the shape rotating around it's own central point and without any option, an animation
that DO WORK in all SVG enabled browsers.</p>
<p>When for CSS3 transforms we could have used values such as <i>center bottom</i> as <code>transform-origin</code> (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes
to SVGs the plugin here will compute the <code>transformOrigin</code> tween setting value accordingly to use a shape's <code>.getBBox()</code> value to determine for instance the coordinates for <i>25% 75%</i> position or <i>center top</i>.</p>
<p>The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set <code>transformOrigin</code> option to <i>50% 50%</i>, but this
animation doesn't work in IE browsers, while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the <code>rotate: 360</code> notation and the animation shows the shape rotating
around it's own central point and without any option, an animation that DO WORK in all SVG enabled browsers.</p>
<p>When for CSS3 transforms we could have used values such as <i>center bottom</i> as <code>transform-origin</code> (also not supported in all modern browsers for SVGs), the entire processing was basically in/by
the browser, however when it comes to SVGs the plugin here will compute the <code>transformOrigin</code> tween setting value accordingly to use a shape's <code>.getBBox()</code> value to determine for instance
the coordinates for <i>25% 75%</i> position or <i>center top</i>.</p>
<p>In other cases you may want to rotate shapes around the center point of the parent <code>&lt;svg></code> or <code>&lt;g></code> element, and we use it's <code>.getBBox()</code> to determine the <i>50% 50%</i> coordinate, so here's how to deal
with it:</p>
<p>In other cases you may want to rotate shapes around the center point of the parent <code>&lt;svg></code> or <code>&lt;g></code> element, and we use it's <code>.getBBox()</code> to determine the <i>50% 50%</i>
coordinate, so here's how to deal with it:</p>
<pre><code class="language-javascript">// rotate around parent svg's "50% 50%" coordinate as transform-origin
<pre><code class="language-javascript">// rotate around parent svg's "50% 50%" coordinate as transform-origin
// get the bounding box of the parent element
var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent &lt;svg> element
@ -397,32 +417,34 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
<div class="featurettes">
<svg id="svgRotate1" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-olive" 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 class="bg-blue" transform="translate(580)" 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>
</svg>
<path class="bg-olive" 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 class="bg-blue" transform="translate(580)" 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>
</svg>
<div class="example-buttons">
<a id="rotateBtn1" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Note that this is the only SVG transform example in which we have adapted the <code>transform-origin</code> for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about
this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check <a href="./assets/js/svg.js">svg.js</a> file.</p>
<p>Note that this is the only SVG transform example in which we have adapted the <code>transform-origin</code> for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are
interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check <a href="./assets/js/svg.js">svg.js</a> file.</p>
<h4>SVG Translation</h4>
<p>In this example we'll have a look at translations, so when setting <code>translate: [150,0]</code>, the first value is X (horizontal) coordinate to which the shape will translate to and the second value is Y (vertical) coordinate for translation.
When <code>translate: 150</code> notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements transformation. Let's have a look at a quick demo:</p>
<p>In this example we'll have a look at translations, so when setting <code>translate: [150,0]</code>, the first value is X (horizontal) coordinate to which the shape will translate to and the second value is
Y (vertical) coordinate for translation. When <code>translate: 150</code> notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements
transformation. Let's have a look at a quick demo:</p>
<div class="featurettes">
<svg id="svgTranslate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-green" 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 class="bg-orange" transform="translate(580)" 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>
</svg>
<path class="bg-green" 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 class="bg-orange" transform="translate(580)" 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>
</svg>
<div class="example-buttons">
<a id="translateBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween uses the CSS3 <code>translate: 580</code> notation for the end value, while the second tween uses the <code>translate: [0,0]</code> as <code class="bg-indigo">svgTransform</code> value. For the second example the values are
unitless and are relative to the <code>viewBox</code> attribute.</p>
<p>The first tween uses the CSS3 <code>translate: 580</code> notation for the end value, while the second tween uses the <code>translate: [0,0]</code> as <code class="bg-indigo">svgTransform</code> value.
For the second example the values are unitless and are relative to the <code>viewBox</code> attribute.</p>
<h4>SVG Skew</h4>
<p>For skews for SVGs we have a very simple notation: <code>skewX: 25</code> or <code>skewY: -25</code> as SVGs don't support the <code>skew: [X,Y]</code> function. Here's a quick demo:</p>
@ -436,28 +458,30 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
<a id="skewBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the <code class="bg-indigo">svgTransform</code> tween property. You will notice translation
kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via <code>transform</code> attribute works just as for the CSS3 transformations.</p>
<p>The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the <code class="bg-indigo">svgTransform</code> tween
property. You will notice translation kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via <code>transform</code> attribute works just
as for the CSS3 transformations.</p>
<h4>SVG Scaling</h4>
<p>Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like <code>scale: 1.5</code>, for both X (horizontal) axis and Y (vertical) axis, to keep it simple and even if
SVGs do support <code>scale(X,Y)</code>. But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to make the animation look as we would expect. A quick demo:</p>
<p>Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like <code>scale: 1.5</code>, for both X (horizontal) axis and Y (vertical) axis,
to keep it simple and even if SVGs do support <code>scale(X,Y)</code>. But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to
make the animation look as we would expect. A quick demo:</p>
<div class="featurettes">
<svg id="svgScale" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-lime" 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 class="bg-olive" transform="translate(580)" 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>
</svg>
<path class="bg-lime" 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 class="bg-olive" transform="translate(580)" 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>
</svg>
<div class="example-buttons">
<a id="scaleBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween scales the shape at <code>scale: 1.5</code> via regular CSS3 transforms, and the second tween scales down the shape at <code>scale: 0.5</code> value via <code class="bg-indigo">svgTransform</code>. If you inspect the elements,
you will notice for the second shape translation is involved, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. A similar case as with the skews.</p>
<p>The first tween scales the shape at <code>scale: 1.5</code> via regular CSS3 transforms, and the second tween scales down the shape at <code>scale: 0.5</code> value via <code class="bg-indigo">svgTransform</code>.
If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. A similar case as with the skews.</p>
<h4>SVG Mixed Transform Functions</h4>
<p>Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation <code>transform-origin</code> to make it look as you would expect it from regular HTML elements. Let's
combine 3 functions at the same time and see what happens:</p>
<p>Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation <code>transform-origin</code> to make it look as you would expect it
from regular HTML elements. Let's combine 3 functions at the same time and see what happens:</p>
<div class="featurettes">
<svg id="svgMixed" class="example-box-model example-box" style="width: 320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<path class="bg-green" 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>
@ -468,16 +492,19 @@ var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformO
<a id="mixedBtn" class="btn btn-teal" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Both shapes are scaled at <code>scale: 1.5</code>, translated to <code>translate: 250</code> and skewed at <code>skewX: -15</code>. If you inspect the elements, you will notice the second shape's translation is different from what we've set
in the tween object, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. This means that the plugin will also compensate rotation transform origin when skews are used, so that both CSS3 transform property
and SVG transform attribute have an identical animation.</p>
<p>Both shapes are scaled at <code>scale: 1.5</code>, translated to <code>translate: 250</code> and skewed at <code>skewX: -15</code>. If you inspect the elements, you will notice the second shape's translation is
different from what we've set in the tween object, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. This means that the plugin will also compensate rotation transform origin
when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.</p>
<h4>Chained SVG transforms</h4>
<p>The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom <code>transform-origin</code>, it should look like this:</p>
<pre><code class="language-markup">&lt;svg>
<p>The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom <code>transform-origin</code>,
it should look like this:</p>
<pre><code class="language-markup">&lt;svg>
&lt;circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20">&lt;/circle>
&lt;/svg>
</code></pre>
<p>Well in this case I would recommend using the values of the first translation as <code>transform-origin</code> for your tween built with the <code>.fromTo()</code> method like so:</p>
<pre><code class="language-javascript">// a possible workaround for animating a SVG element that uses chained transform functions
KUTE.fromTo(element,
@ -502,17 +529,17 @@ KUTE.fromTo(element,
<h4>Recommendations for SVG Transforms</h4>
<ul>
<li>The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and <b>always uses same order of transform functions</b>: <code>translate</code>, <code>rotate</code>, <code>skewX</code>,
<code>skewY</code> and <code>scale</code> to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.</li>
<li>The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and <b>always uses same order of transform functions</b>: <code>translate</code>,
<code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code> to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.</li>
<li>Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.</li>
<li>Keep in mind the adjustments required for rotations, remember the <code>.getBBox()</code> method, it's really useful to set custom <code>transform-origin</code>.</li>
<li>By default browsers use <code>overflow: hidden</code> for <code>&lt;svg></code> so child elements are partialy/completely hidden while animating. You might want to set <code>overflow: visible</code> or some browser specific tricks if that
is the case.</li>
<li>When using <code>viewBox="0 0 500 500"</code> attribute for <code>&lt;svg></code> and no <code>width</code> and/or <code>height</code> attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply
don't work. You might want to <a href="https://css-tricks.com/scale-svg/" target="_blank">check this tutorial</a>.</li>
<li>Similar to the CSS3 transform animation featured in the core engine, the <code class="bg-indigo">svgTransform</code> property DOES stack transform functions for chained tween objects created with the <code>.to()</code> method, you will
have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all the properties and I highly recommend checking the example code for
skews in the <a href="./assets/js/svg.js">svg.js</a> file.</li>
<li>By default browsers use <code>overflow: hidden</code> for <code>&lt;svg></code> so child elements are partialy/completely hidden while animating. You might want to set <code>overflow: visible</code>
or some browser specific tricks if that is the case.</li>
<li>When using <code>viewBox="0 0 500 500"</code> attribute for <code>&lt;svg></code> and no <code>width</code> and/or <code>height</code> attribute(s), means that you expect the SVG to be scalable and most
Internet Explorer versions simply don't work. You might want to <a href="https://css-tricks.com/scale-svg/" target="_blank">check this tutorial</a>.</li>
<li>Similar to the CSS3 transform animation featured in the core engine, the <code class="bg-indigo">svgTransform</code> property DOES stack transform functions for chained tween objects created with the
<code>.to()</code> method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all
the properties and I highly recommend checking the example code for skews in the <a href="./assets/js/svg.js">svg.js</a> file.</li>
<li>In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the <code>.fromTo()</code> method with all proper values.</li>
<li>Also the <code class="bg-indigo">svgTransform</code> tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.</li>
</ul>
@ -521,7 +548,8 @@ KUTE.fromTo(element,
<h3>SVG Plugin Tips</h3>
<ul>
<li>The SVG Plugin can be combined with the <a href="attr.html">Attributes Plugin</a> to enable even more advanced/complex animations for SVG elements.</li>
<li>Since SVG morph scripting works only with <code>path</code> or <code>glyph</code> elements, you might need a <code>convertToPath</code> feature, so <a href="https://github.com/Waest/SVGPathConverter" target="_blank">check this out</a>.</li>
<li>Since SVG morph scripting works only with <code>path</code> or <code>glyph</code> elements, you might need a <code>convertToPath</code> feature, so
<a href="https://github.com/Waest/SVGPathConverter" target="_blank">check this out</a>.</li>
</ul>
</div>

12
text.html
View file

@ -94,17 +94,18 @@
<div class="content-wrap">
<h2>Text Plugin</h2>
<p>The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by character with a very cool effect.</p>
<p>The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by
character with a very cool effect.</p>
<pre><code class="language-javascript">// basic synthax for number increments
<pre><code class="language-javascript">// basic synthax for number increments
var myNumberTween = KUTE.to('selector', {number: 1500}); // this assumes it will start from current number or from 0
// OR text writing character by character
var myTextTween = KUTE.to('selector', {text: 'A text string with other &lt;span&gt;substring&lt;/span&gt; should do.'});
</code></pre>
<p>The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is advised. With other words, try to limit the
number of simultaneus text animations.</p>
<p>The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is
advised. With other words, try to limit the number of simultaneus text animations.</p>
<h3>Number Incrementing/Decreasing</h3>
<p>In the first example, let's animate a number, approximatelly as written above:</p>
@ -150,7 +151,8 @@ var myTextTween = KUTE.to('selector', {text: 'A text string with other &lt;span&
<a id="comBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
</div>
</div>
<p>In this example we've used the <code>textChars</code> option with <code>symbols</code> and <code>all</code> values respectively, but combining the two text properties and some other KUTE.js features can really spice up some content. Have fun!</p>
<p>In this example we've used the <code>textChars</code> option with <code>symbols</code> and <code>all</code> values respectively, but combining the two text properties and some other KUTE.js
features can really spice up some content. Have fun!</p>
<ul id="share" class="nav">
<li>Share </li>