demo of anim features:
Result
Code
ease in
ease out
ease
linear
anim("a1", {width:"90%"}, 3, "ease-in").anim(1).anim("a1", {width:0}, 1, "ease-in"); anim("a2", {width:"90%"}, 3, "ease-out").anim(1).anim("a2", {width:0}, 1, "ease-out"); anim("a3", {width:"90%"}, 3, "ease").anim(1).anim("a3", {width:0}, 1, "ease").anim(1); anim("a4", {width:"90%"}, 3, "lin").anim(1).anim("a4", {width:0}, 1, "lin").anim(1).anim(goA);
anim(1) .anim("b1", {width:"150px", height:"150px"}, 0.5).anim(0.5) .anim("b1", {width:{to:"60px", e:"ease-in"}, height:"60px"}, 0.5).anim(0.5) .anim(goB);
anim("c1", {borderRadius:"30px", left:"50%"}, 1.5, "ease-out") .anim(0.1) .anim("c1", {borderRadius:0, left:0}, 1.5, "ease-in") .anim(1) .anim(goC);
RED
anim("d1", {backgroundColor:"#f66", border:10}, 1).anim(function(){ byId("d1").innerHTML="GRN"}) .anim("d1", {backgroundColor:"#6f6", border:0}, 1).anim(function(){ byId("d1").innerHTML="BLU"}) .anim("d1", {backgroundColor:"#66f", borderLeftWidth:10, borderTopWidth:3, borderRightWidth:10, borderBottomWidth:3}, 1).anim(function(){ byId("d1").innerHTML="RED"}) .anim(goD);
font size
anim("e1", {fontSize:{fr:"12pt", to:30}, opacity:0.4}, 1) .anim("e1", {fontSize:{fr:"30pt", to:12}, opacity:1}, 1) .anim(goE);
the quick brown
fox jumped over
the lazy dog
var node = byId("f1"); node.style.height = "auto"; var newHeight = node.offsetHeight; node.style.height = "1px"; anim("f1", {height: newHeight}, 0.5) .anim(1) .anim("f1", {height:0}, 0.5) .anim(1) .anim(goF);
hover
hover
hover
byId("g1").onmouseover = function(){ anim("g1", {width:"300px"}, 1) } byId("g1").onmouseout = function(){ anim("g1", {width:"100px"}, 0.3) } byId("g2").onmouseover = function(){ anim("g2", {width:"300px"}, 1) } byId("g2").onmouseout = function(){ anim("g2", {width:"100px"}, 0.3) } byId("g3").onmouseover = function(){ anim("g3", {width:"300px"}, 1) } byId("g3").onmouseout = function(){ anim("g3", {width:"100px"}, 0.3) }
< Back to Anim Library