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

Small demo improvements.

Browse source
This commit is contained in:
thednp 2016-08-20 16:44:53 +03:00
parent f121972947
commit d184fe310c
2 changed files with 10 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
assets/js/svg.js
View file

@ -82,42 +82,20 @@ compliMorphBtn.addEventListener('click', function(){
// draw example
var drawBtn = document.getElementById('drawBtn');
var draw1 = KUTE.fromTo('#drawSVG',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw2 = KUTE.fromTo('#drawSVG',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw3 = KUTE.fromTo('#drawSVG',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw4 = KUTE.fromTo('#drawSVG',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw5 = KUTE.fromTo('#drawSVG',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
var drawExample = document.getElementById('draw-example');
var drawEls = drawExample.querySelectorAll('*');
console.log(drawEls);
var draw11 = KUTE.fromTo('#drawSVG1',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw21 = KUTE.fromTo('#drawSVG1',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw31 = KUTE.fromTo('#drawSVG1',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw41 = KUTE.fromTo('#drawSVG1',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw51 = KUTE.fromTo('#drawSVG1',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
var draw12 = KUTE.fromTo('#drawSVG2',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw22 = KUTE.fromTo('#drawSVG2',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw32 = KUTE.fromTo('#drawSVG2',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw42 = KUTE.fromTo('#drawSVG2',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw52 = KUTE.fromTo('#drawSVG2',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
var draw13 = KUTE.fromTo('#drawSVG3',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw23 = KUTE.fromTo('#drawSVG3',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw33 = KUTE.fromTo('#drawSVG3',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw43 = KUTE.fromTo('#drawSVG3',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw53 = KUTE.fromTo('#drawSVG3',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
var draw1 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw2 = KUTE.allFromTo(drawEls,{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw3 = KUTE.allFromTo(drawEls,{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw4 = KUTE.allFromTo(drawEls,{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw5 = KUTE.allFromTo(drawEls,{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);
draw11.chain(draw21); draw21.chain(draw31); draw31.chain(draw41); draw41.chain(draw51);
draw12.chain(draw22); draw22.chain(draw32); draw32.chain(draw42); draw42.chain(draw52);
draw13.chain(draw23); draw23.chain(draw33); draw33.chain(draw43); draw43.chain(draw53);
drawBtn.addEventListener('click', function(){
if ( !draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing ) {
draw1.start();
draw11.start();
draw12.start();
draw13.start();
}
!draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing && draw1.start();
}, false);

2
examples.html
View file

@ -116,7 +116,7 @@ $(tween).KUTE('chain',myTween2); // when tween animation finished, you can trigg
<p>The demo for the above example is <a href="http://codepen.io/thednp/pen/dYXLyj" target="_blank">here</a>.</p>
<h3>Transform Properties Examples</h3>
<p>KUTE.js supports almost all about <code>transform</code> as described in the <a href="http://www.w3.org/TR/css3-transforms/" target="_blank">spec</a>: the 2D <code>translate</code>, <code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code>, as well as the 3D <code>translateX</code>, <code>translateY</code>, <code>translateZ</code>, <code>translate3d</code>, <code>rotateX</code>, <code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code> properties. Additionally it allows you to set a <code>perspective</code> for the element or it's parent as well as a <code>perpective-origin</code> for the element or it's parent.</p>
<p>KUTE.js supports almost all about <code>transform</code> as described in the <a href="http://www.w3.org/TR/css3-transforms/" target="_blank">spec</a>: the 2D <code>translate</code>, <code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code>, as well as the 3D <code>translateX</code>, <code>translateY</code>, <code>translateZ</code>, <code>translate3d</code>, <code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code> properties. Additionally it allows you to set a <code>perspective</code> for the element or it's parent as well as a <code>perpective-origin</code> for the element or it's parent.</p>
<h4>Translations</h4>
<p>In the next example the first box is moving to left 250px with <code>translate</code> property, the second box is moving to the right by 200px using <code>translateX</code> and the third box is moving to the bottom using <code>translate3d</code>. The last box also uses <code>translate3d</code> but requires a <code>perspective</code> value for the animation on the Z axis to be effective.</p>