Selecting DOM elements SelectJs DOM EventListener The second explanation of SelectJs DOM eventListener Animation Event triggering animation Image Slider Drag and Drop Elements

SelectJs :JavaScript library

var objectProperty={"typeAnimation":"vibration",
"property":"left",
"from":0,
"to":300,
"duration":1000} 
animate(select('.div','.cube'),objectProperty)();

var objectProperty={typeAnimation:"elasticoutin",
property:[{transform:["translateZ","rotateZ","rotateX"]},"left"],
from:300,
to:0,
duration:2000
}  
animate(select('.div','.cube'),objectProperty)();
//Or select(animate(select('.div','.cube'),objectProperty))

var objectProperty={typeAnimation:"bouncein",
property:[{transform:["translateZ","rotateZ","rotateX"]},"left","top"],
from:100,
to:0,
duration:2000}  
animate(select('.div','.cube'),objectProperty)();
//Or select(animate(select('.div','.cube'),objectProperty))

var objectProperty={typeAnimation:"circinout","property":[{transform:["translateZ","rotateZ","rotateX"]},"left"],
from:300,to:0,duration:3000}
var objectProperty2={typeAnimation:"expoin",property:"top",
from:100,to:0,duration:1000}
animate(select('.div','.cube'),objectProperty,objectProperty2)();
//Or select(animate(select('.div','.cube'),objectProperty,objectProperty2))

var objectProperty={typeAnimation:"bounceout","property":[{transform:["translateZ","rotateZ","rotateX"]},"left"],
from:300,to:0,duration:2000}
var objectProperty2={typeAnimation:"bounceout","property":"borderRadius",
from:100,to:0,duration:2000}
var objectProperty3={typeAnimation:"bounceout","property":[{transform:["translateX","rotateY","rotateZ"]},"left"],
from:0,to:300,duration:2000}
animate(select('.div'),objectProperty,objectProperty2,select('.cube'),objectProperty3)();
//Or select(animate(select('.div'),objectProperty,objectProperty2,select('.cube'),objectProperty3));

var objectProperty={typeAnimation:"bounceout","property":[{transform:["translateY","rotateZ","rotateX"]},"left"],
from:[{transform:[100,9000,3000]},300],to:0,duration:20000}
var objectProperty2={typeAnimation:"vibration","property":[{backgroundColor:["rgbR","rgbG","rgbB"]},"borderRadius"],
from:[{backgroundColor:[10,250,10]},50],to:[{backgroundColor:[100,20,220]},0],vibrationStep:50,duration:20000}
var objectProperty3={typeAnimation:"elasticin","property":[{transform:["translateZ","rotateY","rotateZ"]},"left"],
from:[{transform:[-600,900,3000]},0],to:[{transform:[0]},400],duration:20000}
animate(select('.div'),objectProperty,objectProperty2,select('.cube'),objectProperty3)();
//Or select(animate(select('.div'),objectProperty,objectProperty2,select('.cube'),objectProperty3));

var objectProperty1={typeAnimation:"vibration","property":[{backgroundColor:["rgbR","rgbG","rgbB"]},"borderRadius"],
boucle:"true",boucleType:"return",
from:[{backgroundColor:[10,250,10]},50],to:[{backgroundColor:[100,20,220]},0],vibrationStep:50,duration:10000}
var objectProperty2={typeAnimation:"elasticin",
boucle:"true",boucleType:"return",
callback:function(el,a,l){//el:DOM element, a:0-1, l:objectProperty.
    if(a==0){
    l.from=Math.floor(Math.random() * 10) + 50
    l.to=Math.floor(Math.random() * 400) + 100
   }
   el.style.transform="translateZ("+(l.to-l.from)*a+"px) rotateY("+(l.to-l.from)*a+"deg) rotateZ("+(l.to-l.from)*a+"deg)";
   el.style.left=(l.to-l.from)*a+"px";
}
,duration:2000}
animate(select('.div'),objectProperty1,select('.cube','.div'),objectProperty2)();
//Or select(animate(select('.div'),objectProperty1,select('.cube'),objectProperty2));