Small demo improvements.
This commit is contained in:
parent
f3414f6551
commit
6c8b49ea8a
|
@ -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);
|
||||
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue