72b1847a0a
* added ESLint and updated all code base * updated SVGPathCommander, CubicBezier, shorter-js, minifill * updated polyfills * minor CSS fixes
136 lines
6.7 KiB
JavaScript
136 lines
6.7 KiB
JavaScript
|
|
/* TRANSFORMS EXAMPLES */
|
|
var translateExamples = document.getElementById('translate-examples'),
|
|
translateBtn = translateExamples.querySelector('.btn'),
|
|
tr2d = translateExamples.getElementsByTagName('div')[0],
|
|
trx = translateExamples.getElementsByTagName('div')[1],
|
|
trry = translateExamples.getElementsByTagName('div')[2],
|
|
trz = translateExamples.getElementsByTagName('div')[3],
|
|
tr2dTween = KUTE.to(tr2d, {translate:[170,170]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
|
trxTween = KUTE.to(trx, {translateX:-170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
|
trryTween = KUTE.to(trry, {translate3d:[0,170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
|
|
trzTween = KUTE.to(trz, {perspective:200, translate3d:[0,0,-100]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500});
|
|
|
|
translateBtn.addEventListener('click', function(){
|
|
!tr2dTween.playing && tr2dTween.start();
|
|
!trxTween.playing && trxTween.start();
|
|
!trryTween.playing && trryTween.start();
|
|
!trzTween.playing && trzTween.start();
|
|
}, false);
|
|
|
|
var rotExamples = document.getElementById('rotExamples'),
|
|
rotBtn = rotExamples.querySelector('.btn'),
|
|
r2d = rotExamples.querySelectorAll('div')[0],
|
|
rx = rotExamples.querySelectorAll('div')[1],
|
|
ry = rotExamples.querySelectorAll('div')[2],
|
|
rz = rotExamples.querySelectorAll('div')[3],
|
|
r2dTween = KUTE.to(r2d, {rotate:-720}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
|
|
rxTween = KUTE.to(rx, {rotateX:180}, {easing:'linear', yoyo:true, repeat: 1, duration:1500}),
|
|
ryTween = KUTE.to(ry, {perspective:200, rotate3d:[0,-180,0],scale:1.2}, {easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
|
|
rzTween = KUTE.to(rz, {rotateZ:360}, {easing:'easingBackOut', yoyo:true, repeat: 1, duration:1500});
|
|
|
|
rotBtn.addEventListener('click', function(){
|
|
!r2dTween.playing && r2dTween.start();
|
|
!rxTween.playing && rxTween.start();
|
|
!ryTween.playing && ryTween.start();
|
|
!rzTween.playing && rzTween.start();
|
|
}, false);
|
|
|
|
var skewExamples = document.getElementById('skewExamples'),
|
|
skewBtn = skewExamples.querySelector('.btn'),
|
|
sx = skewExamples.querySelectorAll('div')[0],
|
|
sy = skewExamples.querySelectorAll('div')[1],
|
|
sxTween = KUTE.to(sx, {skewX:-25}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
|
|
syTween = KUTE.to(sy, {skew:[0,25]}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500});
|
|
skewBtn.addEventListener('click', function(){
|
|
!sxTween.playing && sxTween.start();
|
|
!syTween.playing && syTween.start();
|
|
}, false);
|
|
|
|
var mixTransforms = document.getElementById('mixTransforms'),
|
|
mixBtn = mixTransforms.querySelector('.btn'),
|
|
mt1 = mixTransforms.querySelectorAll('div')[0],
|
|
mt2 = mixTransforms.querySelectorAll('div')[1],
|
|
// pp = KUTE.Util.trueProperty('perspective'),
|
|
// tfp = KUTE.Util.trueProperty('transform'),
|
|
// tfo = KUTE.Util.trueProperty('transformOrigin'),
|
|
mt1Tween = KUTE.to(mt1, {perspective:200,translateX:300,rotateX:360,rotateY:15,rotateZ:5}, { easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
|
|
mt2Tween = KUTE.to(mt2, {translateX:300,rotateX:360,rotateY:15,rotateZ:5}, { easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500});
|
|
|
|
mixBtn.addEventListener('click', function(){
|
|
!mt1Tween.playing && mt1Tween.start();
|
|
!mt2Tween.playing && mt2Tween.start();
|
|
}, false);
|
|
|
|
/* TRANSFORMS EXAMPLES */
|
|
|
|
|
|
/* CHAINED TWEENS EXAMPLE */
|
|
var chainedTweens = document.getElementById('chainedTweens'),
|
|
el1 = chainedTweens.querySelectorAll('.example-item')[0],
|
|
el2 = chainedTweens.querySelectorAll('.example-item')[1],
|
|
el3 = chainedTweens.querySelectorAll('.example-item')[2],
|
|
el4 = chainedTweens.querySelectorAll('.example-item')[3],
|
|
ctb = chainedTweens.querySelector('.btn');
|
|
|
|
// built the tween objects for element1
|
|
var tween11 = KUTE.fromTo(el1, { perspective:400,translateX:0, rotateX: 0}, {perspective:400,translateX:150, rotateX: 25}, {duration: 2000});
|
|
var tween12 = KUTE.fromTo(el1, { perspective:400,translateY:0, rotateY: 0}, {perspective:400,translateY:20, rotateY: 15}, {duration: 2000});
|
|
var tween13 = KUTE.fromTo(el1, { perspective:400,translate3d:[150,20,0], rotate3d:[25,15,0]}, {perspective:400,translate3d:[0,0,0], rotate3d:[0,0,0]}, {duration: 3000});
|
|
|
|
// chain tweens
|
|
try {
|
|
tween11.chain(tween12);
|
|
tween12.chain(tween13);
|
|
} catch(e) {
|
|
console.warn(e+". TweenBase doesn\'t support chain method")
|
|
}
|
|
|
|
// built the tween objects for element2
|
|
var tween21 = KUTE.fromTo(el2, { perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0 }, {perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY:0}, {duration: 2000});
|
|
var tween22 = KUTE.fromTo(el2, { perspective:400,translateX:150, translateY:0, rotateX: 25, rotateY: 0}, {perspective:400,translateX:150, translateY:20, rotateX: 25, rotateY: 15}, {duration: 2000});
|
|
var tween23 = KUTE.fromTo(el2, { perspective:400,translate3d:[150,20,0], rotateX: 25, rotateY:15}, {perspective:400,translate3d:[0,0,0], rotateX: 0, rotateY:0}, {duration: 3000});
|
|
|
|
// chain tweens
|
|
try{
|
|
tween21.chain(tween22);
|
|
tween22.chain(tween23);
|
|
}catch(e){
|
|
console.warn(e+". TweenBase doesn\'t support chain method")
|
|
}
|
|
|
|
// built the tween objects for element3
|
|
var tween31 = KUTE.to(el3,{ perspective:400,translateX:150, rotateX:25}, {duration: 2000});
|
|
var tween32 = KUTE.to(el3,{ perspective:400,translateX:150,translateY:20, rotateY:15}, {duration: 2000});
|
|
var tween33 = KUTE.to(el3,{ perspective:400,translateX:0, translateY:0, rotateX: 0, rotateY:0}, {duration: 3000});
|
|
|
|
// chain tweens
|
|
try{
|
|
tween31.chain(tween32);
|
|
tween32.chain(tween33);
|
|
}catch(e){
|
|
console.warn(e+". TweenBase doesn\'t support chain method")
|
|
}
|
|
|
|
// built the tween objects for element4
|
|
var tween41 = KUTE.to(el4,{ perspective:400, translate3d:[150,0,0], rotate3d: [25,0,0]}, {duration: 2000});
|
|
var tween42 = KUTE.to(el4,{ perspective:400, translate3d:[150,20,0], rotate3d:[25,15,0]}, {duration: 2000});
|
|
var tween43 = KUTE.to(el4,{ perspective:400, translate3d:[0,0,0], rotate3d: [0,0,0]}, {duration: 3000});
|
|
|
|
// chain tweens
|
|
try{
|
|
tween41.chain(tween42);
|
|
tween42.chain(tween43);
|
|
}catch(e){
|
|
console.warn(e+". TweenBase doesn\'t support chain method")
|
|
}
|
|
|
|
|
|
ctb.addEventListener('click',function(e){
|
|
e.preventDefault();
|
|
!tween11.playing && !tween12.playing && !tween13.playing && tween11.start();
|
|
!tween21.playing && !tween22.playing && !tween23.playing && tween21.start();
|
|
!tween31.playing && !tween32.playing && !tween33.playing && tween31.start();
|
|
!tween41.playing && !tween42.playing && !tween43.playing && tween41.start();
|
|
},false);
|
|
/* CHAINED TWEENS EXAMPLE */ |