26 lines
942 B
JavaScript
26 lines
942 B
JavaScript
|
|
/* CLIP EXAMPLE */
|
|
var clipExample = document.getElementById('clip'),
|
|
clipElement = clipExample.querySelector('.example-box'),
|
|
clpbtn = clipExample.querySelector('.btn');
|
|
|
|
var clp1 = KUTE.to(clipElement, {clip: [0,20,150,0]}, {duration:500, easing: 'easingCubicOut'});
|
|
var clp2 = KUTE.to(clipElement, {clip: [0,150,150,130]}, {duration:600, easing: 'easingCubicOut'});
|
|
var clp3 = KUTE.to(clipElement, {clip: [0,150,20,0]}, {duration:800, easing: 'easingCubicOut'});
|
|
var clp4 = KUTE.to(clipElement, {clip: [0,150,150,0]}, {duration:1200, easing: 'easingExponentialInOut'});
|
|
|
|
//chain some clps
|
|
try{
|
|
clp1.chain(clp2);
|
|
clp2.chain(clp3);
|
|
clp3.chain(clp4);
|
|
}catch(e){
|
|
console.error(e+". TweenBase doesn\'t support chain method")
|
|
}
|
|
|
|
clpbtn.addEventListener('click', function(e){
|
|
e.preventDefault();
|
|
!clp1.playing && !clp2.playing && !clp3.playing && !clp4.playing && clp1.start();
|
|
},false);
|
|
/* CLIP EXAMPLE */
|